Layui 带多选框表格监听事件以及按钮自动点击写法实例


Posted in Javascript onSeptember 02, 2019

不话不多说了,直接上代码吧:

<div class="layui-btn-group demoTable" style="margin: 10px;">
  <button class="layui-btn" id="hqsj" data-type="getCheckData">获取选中行数据</button>
  <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
  <button class="layui-btn" data-type="isAll">验证是否全选</button>
  <button class="layui-btn" style="right: 30px;" οnclick="submitmychose()">提交选择</button>
</div>
<table class="layui-table" lay-data="{width: 990, height:495, url:'<%=request.getContextPath()%>/admin/getSportcuDate', id:'idTest'}" lay-filter="demo">
  <thead>
    <tr>
      <th lay-data="{type:'checkbox',width:80,fixed: 'left'}"></th>
      <th lay-data="{field:'sportId',width:100, sort: true, fixed: true}">ID</th>
      <th lay-data="{field:'sportName',width:290}">运动名</th>
      <th lay-data="{field:'sportTime',width:270, sort: true}">运动时长</th>
      <th lay-data="{field:'sortId', width:225}">运动类型</th>
    </tr>
  </thead>
</table>

<script>
var msg="";
var idlist="";
layui.use('table', function(){
      var table = layui.table;
      
      //监听表格复选框选择
      table.on('checkbox(demo)', function(obj){
          
      });
      
      var $ = layui.$, active = {
        getCheckData: function(){ //获取选中数据
            msg="";
            idlist="";
          var checkStatus = table.checkStatus('idTest')
          ,data = checkStatus.data;
        for(var i=0; i<data.length;i++){
          msg=msg+"周"+(i+1)+":"+data[i].sportName+" ";
          idlist =idlist+data[i].sportId+",";
        }
        }
        ,getCheckLength: function(){ //获取选中数目
          var checkStatus = table.checkStatus('idTest')
          ,data = checkStatus.data;
          layer.msg('选中了:'+ data.length + ' 个');
        }
        ,isAll: function(){ //验证是否全选
          var checkStatus = table.checkStatus('idTest');
          layer.msg(checkStatus.isAll ? '全选': '未全选')
        }
      };
      $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });
    });
    function submitmychose(){
        $('#hqsj').trigger("click");
        
    }
</script>

以上这篇Layui 带多选框表格监听事件以及按钮自动点击写法实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
Dec 09 Javascript
JavaScript 数组详解
Oct 10 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
论JavaScript模块化编程
Mar 07 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
js实现div色块拖动录制
Jan 16 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 #Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 #Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 #Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 #Javascript
Vue内部渲染视图的方法
Sep 02 #Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 #Javascript
Layui多选只有最后一个值的解决方法
Sep 02 #Javascript
You might like
php生成短网址示例
2014/05/05 PHP
php以post形式发送xml的方法
2014/11/04 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP数组实例详解
2016/06/26 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
2011/09/28 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
Python中正则表达式的用法总结
2019/02/22 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
python实现学生成绩测评系统
2020/06/22 Python
Pycharm调试程序技巧小结
2020/08/08 Python
学习Python需要哪些工具
2020/09/04 Python
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
酒店管理毕业生自我鉴定
2014/03/02 职场文书
酒店员工培训方案
2014/06/02 职场文书
放射科岗位职责
2015/02/14 职场文书
2015年小学开学寄语
2015/02/27 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
演讲稿之开卷有益
2019/08/07 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
详解PyTorch模型保存与加载
2022/04/28 Python