layui的table单击行勾选checkbox功能方法


Posted in Javascript onAugust 14, 2018

如下所示:

//单击行勾选checkbox事件
$(document).on("click",".layui-table-body table.layui-table tbody tr", function () {
 var index = $(this).attr('data-index');
 var tableBox = $(this).parents('.layui-table-box');
 //存在固定列
 if (tableBox.find(".layui-table-fixed.layui-table-fixed-l").length>0) {
  tableDiv = tableBox.find(".layui-table-fixed.layui-table-fixed-l");
 } else {
  tableDiv = tableBox.find(".layui-table-body.layui-table-main");
 }
 var checkCell = tableDiv.find("tr[data-index=" + index + "]").find("td div.laytable-cell-checkbox div.layui-form-checkbox I");
 if (checkCell.length>0) {
  checkCell.click();
 }
});

$(document).on("click", "td div.laytable-cell-checkbox div.layui-form-checkbox", function (e) {
 e.stopPropagation();
});

实现原理:找到table的div绑定单击事件到表格的行:

1、取得行的索引data-index,为后面查找checkbox的控件作准备

2、根据是否有固定列查找checkbox所在的表格table(当存在固定列时,固定列是另一个table,checkbox控件就在这上面,因此要优先取这个)

3、通过table和data-index查找checkbox控件”td div.laytable-cell-checkbox div.layui-form-checkbox I”,如果存在,则执行单击

4、对td的单击事件进行拦截停止,防止事件冒泡再次触发上述的单击事件5、将此代码在页面初始化后执行一次即可以。

实现效果:单击行,自动选中或取消勾选。

以上这篇layui的table单击行勾选checkbox功能方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript去除字符串左右两端的空格
Feb 05 Javascript
js验证上传图片的方法
May 12 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
node之本地服务器图片上传的方法示例
Mar 26 Javascript
layui动态加载多表头的实例
Sep 05 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 #Javascript
深入浅析Node环境和浏览器的区别
Aug 14 #Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 #Javascript
react实现换肤功能的示例代码
Aug 14 #Javascript
详解vue-cli3使用
Aug 14 #Javascript
详解angular部署到iis出现404解决方案
Aug 14 #Javascript
学习React中ref的两个demo示例
Aug 14 #Javascript
You might like
德生PL990的分析评价
2021/03/02 无线电
支付宝支付开发――当面付条码支付和扫码支付实例
2016/11/04 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
新手该如何学python怎么学好python?
2008/10/07 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
WxPython实现无边框界面
2019/11/18 Python
基于Python实现扑克牌面试题
2019/12/11 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
南京某公司笔试题
2013/01/27 面试题
护士实习自我鉴定
2013/10/22 职场文书
网络编辑职责
2014/03/01 职场文书
大家访活动实施方案
2014/03/10 职场文书
读书活动实施方案
2014/03/10 职场文书
一帮一活动总结
2014/05/08 职场文书
质量承诺书怎么写
2014/05/24 职场文书
银行求职自荐书
2014/06/25 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
联谊会开场白
2015/06/01 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python