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 相关文章推荐
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
利用JS测试目标网站的打开响应速度
Dec 01 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
webpack优化的深入理解
Dec 10 Javascript
JavaScript学习笔记之DOM操作实例分析
Jan 08 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 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生成Gif图片验证码
2013/10/27 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
PHP单例模式应用示例【多次连接数据库只实例化一次】
2018/12/18 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
Bootstrap入门书籍之(一)排版
2016/02/17 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
js实现多行文本框统计剩余字数功能
2017/03/28 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python贪吃蛇游戏编写代码
2020/10/26 Python
详解Python中for循环是如何工作的
2017/06/30 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
Django框架视图函数设计示例
2019/07/29 Python
python文件读写代码实例
2019/10/21 Python
通过代码实例了解Python异常本质
2020/09/16 Python
美国孕妇装购物网站:Motherhood Maternity
2019/09/22 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
建筑工程自我鉴定
2013/10/18 职场文书
求职自荐信格式
2013/12/04 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
爱护公共设施标语
2014/06/24 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android