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 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
React如何避免重渲染
Apr 10 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 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 mail to 配置详解
2014/01/16 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
借助javascript代码判断网页是静态还是伪静态
2014/05/05 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
JS中mouseup事件丢失的原因与解决办法
2017/06/14 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
简单理解Vue中的nextTick方法
2018/01/30 Javascript
jQuery实现数字华容道小游戏(实例代码)
2020/01/16 jQuery
swiper实现导航滚动效果
2020/12/13 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
Python模块搜索路径代码详解
2018/01/29 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
总结python中pass的作用
2019/02/27 Python
用python写测试数据文件过程解析
2019/09/25 Python
Keras 使用 Lambda层详解
2020/06/10 Python
python利用platform模块获取系统信息
2020/10/09 Python
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
《我要的是葫芦》教学反思
2014/02/23 职场文书
2019各种承诺书范文
2019/06/24 职场文书
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang