layui table行点击tr_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功能方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

layui table行点击tr_layui的table单击行勾选checkbox功能方法相关推荐

layui table行点击tr_layui框架table表格实现单击行选中checkbox功能
layui.table.on('row(operateEvent)', function (obj) { var tableDiv; var index = $(obj.tr.selector).at ...
html 勾选框点击文字勾选,ztree点击文字勾选checkbox，radio实现方法
ztree的复选框checkbok,单选框radio是用背景图片来模拟的,所以点击文字即使用label括起checkbox,radio文字一起,点击文字也是无法勾选checkbox. 要想点击ztre ...
Vue+iView table分页勾选记忆功能
iView table分页勾选记忆功能一,需求. a,需求分析: 第一页勾选后,再点分页,勾选其它页数据,可以记住所有勾选的数据,然后可以回显所选数据到页面上,并且跳转页面仍可显示. b,现有功能: ...
li通过绑定点击事件实现类似购物车功能(全选，点击勾选、取消等)，此例为模仿移动端小说书架界面实现勾选取消功能展示，有些麻烦但好理解（前端xb要努力变强）
效果展示点击全选被全部勾选,再点击则取消勾选(下方还有取消按钮,实现同样功能). 也可以实现点击的书籍被勾选,再次点击则取消勾选在功能实现过程中主要是对v-show.v-if.v-else等的灵活 ...
layui table行点击tr_LayUI数据表格行单击事件中选中
2019年9月5日11:19:17 实现思路直接修改复选框选中状态和伪复选框(DIV)Class 但是调用checkStatus获取不到选中的行查看底层源代码checkStatus方法的实现是缓存 ...
layui table工具栏点击时间_layui table表格上添加日期控件laydate
方法:标红的地方是关键,经测试不要 data_field:'velappr' 也能用. tatable.render({ id:'idTest' ,elem: '#dict' ,page: true, ...
iview 动态控制 table中某一行select勾选框能否选中，以及某一行select勾选框能否显示(隐藏禁用的勾选框)。
如上图,这是一个vue页面中的table,在其columns中加了一个selection后,实现了多选/全选table行的功能: {type: 'selection',width: 60,align: ...
60.实现elementUI表格点击某一行选中勾选框
前言: 项目中需要做到除了勾选表格第一列勾选框去选中数据外,还要通过点击某一行任何地方,都可以勾选到这条数据,并且要做到选中的数据不能重复,记录一下: (全选和选中勾选框的方法就不写了这里只写通过点 ...
SAP科目的行项目显示未勾选补救步骤
SAP科目的行项目显示未勾选补救步骤显示行项目:确认是否在BSIS.BSAS中显示这些科目的行项目.通常对于统驭科目在各明细账户中显示各自的行项目清单,因而不在总账科目中显示行项目.科目属性中不选择 ...

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

layui table行点击tr_layui的table单击行勾选checkbox功能方法相关推荐

最新文章

热门文章