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 相关文章推荐
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
js+css在交互上的应用
2010/07/18 Javascript
jquery插件制作 提示框插件实现代码
2012/08/17 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
荐书|您有一份JavaScript书单待签收
2017/07/21 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
package.json中homepage属性的作用详解
2020/03/11 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Anaconda+vscode+pytorch环境搭建过程详解
2020/05/25 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
上课迟到检讨书
2014/02/19 职场文书
六个一活动实施方案
2014/03/21 职场文书
五好关工委申报材料
2014/05/31 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
党校团干班培训心得体会
2016/01/06 职场文书