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 prototype属性深入介绍
Nov 27 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
Dec 27 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
vue移动端路由切换实例分析
May 14 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
Node实现搜索框进行模糊查询
Jun 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学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php中有关字符串的4个函数substr、strrchr、strstr、ereg介绍和使用例子
2014/04/24 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
获取body标签的两种方法
2011/10/13 Javascript
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
用html5 js实现点击一个按钮达到浏览器全屏效果
2014/05/28 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
2017/03/09 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
解决layui checkbox 提交多个值的问题
2019/09/02 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python实现web方式logview的方法
2015/08/10 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
日语专业个人求职信范文
2014/02/02 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
2014年度工作总结报告
2014/12/15 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
500字作文之周记
2019/12/13 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
pytorch查看网络参数显存占用量等操作
2021/05/12 Python