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 XML实现两级级联下拉列表
Nov 10 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
JS函数的定义与调用方法推荐
May 12 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
p5.js实现简单货车运动动画
Oct 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
javascript时间函数大全
2014/06/30 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
Python描述器descriptor详解
2015/02/03 Python
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
Python连接DB2数据库
2016/08/27 Python
python3中int(整型)的使用教程
2017/03/23 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
css3实现信纸/同学录效果的示例代码
2018/12/11 HTML / CSS
新闻学毕业生自荐信
2013/11/15 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
2015年护士节活动总结
2015/02/10 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书