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

 更新时间:2018年08月14日 10:29:32   转载 作者:damosk  
今天小编就为大家分享一篇layui的table单击行勾选checkbox功能方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

//单击行勾选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笔记 数据的存储与访问性能优化

    在JavaScript中,数据的存储位置对代码的整体性能有着重要的影响。有四种数据访问类型:直接量,局部变量,数组项,对象成员
    2012-08-08
  • Bootstrap3.0学习教程之JS折叠插件

    Bootstrap3.0学习教程之JS折叠插件

    这篇文章主要介绍了Bootstrap3.0学习教程之JS折叠插件的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-05-05
  • js密码强度实时检测代码

    js密码强度实时检测代码

    这篇文章主要为大家详细介绍了js密码强度实时检测代码,密码强度的判断, 在注册网站用户的时候, 是一个必须要做的事情,如何实现js密码强度检测,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 把json格式的字符串转换成javascript对象或数组的方法总结

    把json格式的字符串转换成javascript对象或数组的方法总结

    下面小编就为大家带来一篇把json格式的字符串转换成javascript对象或数组的方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • JS保留两位小数 四舍五入函数的小例子

    JS保留两位小数 四舍五入函数的小例子

    这篇文章主要介绍了JS保留两位小数 四舍五入函数的小例子,有需要的朋友可以参考一下
    2013-11-11
  • JavaScript实现的select点菜功能示例

    JavaScript实现的select点菜功能示例

    这篇文章主要介绍了JavaScript实现的select点菜功能,涉及javascript动态操作页面元素及元素遍历相关技巧,需要的朋友可以参考下
    2017-01-01
  • 利用 spin.js 生成等待效果(js 等待效果)

    利用 spin.js 生成等待效果(js 等待效果)

    这篇文章主要介绍了利用 spin.js 生成等待效果(js 等待效果),需要的朋友可以参考下
    2017-06-06
  • js获取电脑分辨率的思路及操作

    js获取电脑分辨率的思路及操作

    用户要求不同的分辨率,弹出窗口的位置不同,下面是本文的一些想法,并附有示例,喜欢的朋友可以收藏下
    2013-11-11
  • 尝试在让script的type属性等于text/html

    尝试在让script的type属性等于text/html

    我们可以在script片断中定义一个被JS调用的代码,但代码又不在页面上显示,这时,我们可以使用下面的方法;当script中的type等于text/html时我们可以做些什么呢?感兴趣的朋友可以了解下啊
    2013-01-01
  • 用javascript作一个通用向导说明

    用javascript作一个通用向导说明

    向导可以让你的网站用户快速上手使用你的web应用,提高网站的吸引力。向导一般分为好几个步骤,每个步骤收集一些数据,并且支持退回功能,所有步骤完成后可以得到每一步的收集结果。这里给大家展示一种比较通用,灵活且简单的向导框架。
    2011-08-08

最新评论