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如何实现暂停功能
Nov 06 Javascript
Bootstrap布局方式详解
May 27 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
jQuery 移除事件的方法
Jun 20 jQuery
解决vuex刷新数据消失问题
Nov 12 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
微信小程序实现录音Record功能
May 09 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中多进程编程的相关函数的使用
2015/08/18 PHP
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
JavaScript中判断两个字符串是否相等的方法
2015/07/07 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
python处理按钮消息的实例详解
2017/07/11 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
教你使用python实现微信每天给女朋友说晚安
2018/03/23 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
Python类如何定义私有变量
2020/02/03 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
python matplotlib包图像配色方案分享
2020/03/14 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
Pure Collection美国官网:来自英国羊绒专家的奢华羊绒
2017/11/19 全球购物
给物业的表扬信
2014/01/21 职场文书
学校志愿者活动总结
2014/06/27 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
劳动仲裁调解书
2015/05/20 职场文书
九年级英语教学反思
2016/02/15 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript