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功能方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Layui Table js 模拟选中checkbox的例子

    思路,根据 data-index 找到 点击到的tr,获取tr下的 div,js 模拟点击 function iniTable() { layui.use('table', function(){ var table = layui.table; //展示已知数据 table.render({ elem: tableid ,cols: [[ //标题栏 {type:'checkbox',id:'goodsLimitSeqNo'} , {field: 'goodsLimitSeqNo', titl

  • Layui组件Table绑定行点击事件和获取行数据的方法

    一个项目里面用了layui,简直无数个坑... 这里先记录一个行点击事件的坑,后面慢慢补充. 初始化表格完成后利用事件给table(定位table需要在HTML代码中给table放入指定div)的tr绑定双击事件,然后获取Index,再从数据集里面取出行数据; done: function(res, curr, count){ $('#div').find('.layui-table-body').find("table" ).find("tbody").child

  • layui 监听表格复选框选中值的方法

    需要达到的目的: ajax()异步请求后台时,需要传入表格里复选框选中的id值 注意:在渲染form on 方法的done里面加入 done:function(res){ table_data=res.data; } 将复选框选中的值的id加入数组中,然后传递到后台作为ids参数 //自定义数组 var table_data=new Array(); var ids =new Array(); table.on('checkbox(push_port_table)', function(obj)

  • layui问题之模拟table表格中的选中按钮选中事件的方法

    一.问题 不操作页面,实现table表格中的checkbox选中功能 二.经过 刚开始的思路: 1.通过table的id,找到table渲染时生成的div,即table的下一个兄弟节点div.layui-table-view 2.由于checkbox是固定列,再通过第一步,找到div.layui-table-view的子元素.layui-table-fixed 3.紧接着,找出table的第一行的第一个td里面的input,即tr[data-index="0"] td input(注:

  • 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(".l

  • Ant design vue table 单击行选中 勾选checkbox教程

    最近了解Ant design 设计table 单击行选中checkedbox功能,相比于element的 @row-click 再触发toggleRowSelection,ant design的api就没那么清晰了,言归正传 期望:Ant design table 单击行选中 勾选checkedbox 实现: 单选: onClickRow(record) { return { on: { click: () => { let keys = []; keys.push(record.id); th

  • 解决Layui选择全部,换页checkbox复选框重新勾选的问题方法

    在项目中发现layui数据表格勾选复选框checkbox的时候,转到新的一页勾选,上一次的勾选不会选中,即没有记忆功能.导致跟后台交互传递参数不全问题. 为了解决此问题,我们可以借助缓存,每勾选一个,保存到缓存变量数组中,取消勾选的时候,删除缓存的对应项. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <

  • layui table 多行删除(id获取)的方法

    如下所示: <button class="layui-btn layui-btn-danger" data-type="getid" οnclick="delAll()">删除所有选中行</button> js: table.on('checkbox(table)', function(obj){ var data = obj.data; }); layui.jquery, active = { getid: functi

  • 基于layui的table插件进行复选框联动功能的实现方法

    实际项目功能: 给员工账号进行分配权限(增加权限,修改权限) 实现思路: 用表格展示权限列表–>勾选分配该账号的权限–>调用接口 出现的问题: 因为某些权限之间是有关联的,比如: " 查看材料 " 和 " 修改材料 " ,这两个权限是有联系的,当你勾选 " 修改材料 " 权限的时候,那么, " 查看材料 " 权限也要勾选上,当你取消勾选 " 查看材料 "权限的时候," 修改材料 &qu

  • Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

    最近做的一个项目是基于 vue + AntDesign 的.由于项目要求,需要在 Table 组件的行内点右键的时候弹出菜单.在线演示地址及最终效果图如下: 在线演示地址>> 首先新建一个Table组件的实例: <a-table :columns="columns" :rowKey="record => { return record.INDEX;}" :dataSource="tableData" /> ... c

  • 详解element-ui表格中勾选checkbox，高亮当前行

    详解element-ui表格中勾选checkbox，高亮当前行

    我们在做后台管理系统的时候经常需要操作表格,这里我们要实现的一个功能就是,勾选复选框,高亮显示当前行,也就是当前行样式改变.这是一个非常常见的使用场景,官网给我们提供了一个带Checkbox的table表格,但是并没有给出上述使用案例,解决办法有很多,我简单总结下我自己的实现过程,希望能帮助到有同样需求的小伙伴. 勾选表格中当前项时会触发selection-change事件,在<el-table>中绑定handleSelectionChange方法. <el-table @selecti

  • jquery操作checkbox火狐下第二次无法勾选的解决方法

    最近在学习jQuery(版本jquery-1.9.1.js),要求用jQuery实现全选/全不选.反选,在IE(IE8)中没有问题,但在火狐浏览器中调试的时候出现了一些小问题,达不到效果. html代码如下: <div> 你爱好的运动是 <input type="checkbox" id="selectal1" /><label for="selectal1">全选/全不选</label><b

  • jquery全选checkBox功能实现代码(取消全选功能)

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <

随机推荐