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的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
移动节点的jquery代码
Jan 13 Javascript
jquery选择器大全 全面详解jquery选择器
Mar 06 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
js实现飞机大战小游戏
Aug 26 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字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
php生成验证码函数
2015/10/20 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
php获取linux命令结果的实例
2017/03/13 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
js下将字符串当函数执行的方法
2011/07/13 Javascript
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
react native 原生模块桥接的简单说明小结
2019/02/26 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
react基本安装与测试示例
2020/04/27 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
python实现线程池的方法
2015/06/30 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
护士的岗位职责
2013/12/04 职场文书
给面试官的感谢信
2014/02/01 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
学习保证书范文
2014/04/30 职场文书
技校毕业生自荐书
2014/05/23 职场文书
离婚起诉书范本
2015/05/18 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers