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 异常处理使用总结
Jun 21 Javascript
javascript 动态生成私有变量访问器
Dec 06 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
JS异步堆栈追踪之为什么await胜过Promise
Apr 28 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
学习PHP session的传递方式
2016/06/15 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
Vue表单实例代码
2016/09/05 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
浅谈vue加载优化策略
2019/03/19 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
Python 文件重命名工具代码
2009/07/26 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
python实现排序算法解析
2018/09/08 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
原生python实现knn分类算法
2019/10/24 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
python实现图片,视频人脸识别(opencv版)
2020/11/18 Python
python性能测试工具locust的使用
2020/12/28 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
领导欢迎词致辞
2015/01/23 职场文书
步步惊心观后感
2015/06/12 职场文书
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers