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入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
Nov 08 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
Js制作点击输入框时默认文字消失的效果
Sep 05 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
JavaScript如何实现图片处理与合成
May 29 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 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
phpmyadmin操作流程
2006/10/09 PHP
杏林同学录(七)
2006/10/09 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
2010/07/04 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
详解vue组件基础
2018/05/04 Javascript
vue检测对象和数组的变化分析
2018/06/30 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
2020/07/27 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
Python工厂函数用法实例分析
2018/05/14 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
python模块导入的方法
2019/10/24 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
ubuntu16.04升级Python3.5到Python3.7的方法步骤
2020/08/20 Python
作弊检讨书1000字
2014/02/01 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
庆六一宣传标语
2014/10/08 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS