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 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
javascript 四则运算精度修正函数代码
May 31 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
vue 详情跳转至列表页实现列表页缓存
Mar 27 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中实现Javascript的escape()函数代码
2010/08/08 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
改版了网上的一个js操作userdata
2007/04/27 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
2015/12/08 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
深入理解Node module模块
2018/03/26 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python二分查找详解
2015/09/13 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
如何写一封打动人心的求职信
2014/02/17 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
中职招生先进个人材料
2014/08/31 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
运动员加油词
2015/07/18 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技