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 相关文章推荐
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
Nov 25 Javascript
js实现日历的简单算法
Jan 24 Javascript
微信小程序支付之c#后台实现方法
Oct 19 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 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
解析htaccess伪静态的规则
2013/06/18 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
php post换行的方法
2020/02/03 PHP
B/S开发中常用javaScript技术与代码
2007/03/09 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
jQuery创建插件的代码分析
2011/04/14 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
简单介绍Python中的几种数据类型
2016/01/02 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
python pycharm的安装及其使用
2019/10/11 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
英国当代时尚和街头服饰店:18montrose
2018/12/15 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
学雷锋的心得体会
2014/09/04 职场文书
给老师的一封感谢信
2015/01/20 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
深入理解go缓存库freecache的使用
2022/02/15 Golang
windows系统搭建WEB服务器详细教程
2022/08/05 Servers