layui table中的checkbox禁用问题

news/2024/9/20 7:45:08 标签: layui, 前端, javascript
  • 在项目开发中遇到table框已经选择过的数据不支持二次选择从而要禁用复选框不许选中,但会导致复选框全选时layui的table组件源码中赋值时是根据全部复选框的下标顺序来赋值到数组中返回给你,这样已被禁用复选框的数据也会被push到数组中导致数据错乱;本layui 版本为2.4.5,现解决方案如下,找到layui的table.js源码文件

第一步 找到下面代码块

javascript">// 找到该代码块!!!!!
a.elem.on("click", 'input[name="layTableCheckbox"]+', function () {
    var e = t(this).prev(), i = a.layBody.find('input[name="layTableCheckbox"]'),
         l = e.parents("tr").eq(0).data("index"), n = e[0].checked,
         o = "layTableAllChoose" === e.attr("lay-filter");
     o ? (i.each(function (e, t) {
         t.checked = n, a.setCheckData(e, n)
     }), a.syncCheckAll(), a.renderForm("checkbox")) : (a.setCheckData(l, n), a.syncCheckAll()), layui.event.call(e[0], u, "checkbox(" + p + ")", v.call(e[0], {
         checked: n,
         type: o ? "all" : "one"
     }))
 })

第二部 在第一步的代码快下面添加

javascript">a.elem.on("click", 'input[name="checkChooseAll"]+', function () {
            var e = t(this).prev(), i = a.layBody.find('input[name="checkChooseAll"]'),
                l = e.parents("tr").eq(0).data("index"), n = e[0].checked,
                o = "tableCheckChooseAll" === e.attr("lay-filter");
            var _i = a.layBody.find('input[name="layTableCheckbox"]');
            if(o){
                i.each(function (e, i) {
                    var idx = t(i).parents('tr').attr('data-index');
                    i.checked = n, a.setCheckData(idx, n)
                });
                (_i.each(function (e, i) {
                    var idx = t(i).parents('tr').attr('data-index');
                    i.checked = n, a.setCheckData(idx, n)
                }), a.syncCheckAll(), a.renderForm("checkbox"))
            }else {
                var id = e.data('id');
                var idName = e.data('idKey');
                var bc = a.layBody.find('[data-check-id="' + id + '"]');
                (bc.each(function (e, t) {
                    t.checked = n;
                }), a.renderForm("checkbox"));
                var r = d.cache[a.key];
                t.each(r, function (idx, ee) {
                    if (ee[idName] === id) {
                        a.setCheckData(idx, n)
                    }
                });
            }
            layui.event.call(e[0], u, "checkbox(" + p + ")", v.call(e[0], {
                checked: n,
                type: o ? "all" : "one"
            }))
        })

第三步 回到你渲染table数据的js中修改checkbox;其中注意data-id的值与data-id-key的字段需要一致,因在第一步代码块中有做判断处理

javascript"> {
    field: 'choosePatient',
     width: 60,
     align: 'center',
     title: '<input type="checkbox" name="checkChooseAll" lay-skin="primary" lay-filter="tableCheckChooseAll">',
     templet: function (d) {
         return '<input type="checkbox" lay-skin="primary" class="check-all" name="checkChooseAll" data-id="' + d.drugsInfo + '" data-id-key="drugsInfo">'
     }
 }

http://www.niftyadmin.cn/n/5666840.html

相关文章

nginx和php-fpm连接超时的相关配置以及Nginx中的try_files以及root、alias的使用

一、nginx和php-fpm连接超时的相关配置 线上的PHP服务器架构大都是nginx proxy->nginx web->php-fpm。在服务器运行正常&#xff0c;服务器之间的连接正常&#xff0c;未被防火墙阻止的情况下&#xff0c;对这种架构排查504报错时需要注意以下几个地方的参数。 1是nginx…

C++学习笔记(32)

三十四、双链表 示例&#xff1a; #include <iostream> using namespace std; typedef int ElemType; // 自定义链表的数据元素为整数。 struct LNode // 双链表的结点。 { ElemType data; // 存放结点的数据元素。 struct LNode* prior,*next; // 前驱和后继结点的指针。…

Windows10安装cuda11.3.0+cudnn8.5.0,以及创建conda虚拟环境(pytorch)

1、检查电脑驱动版本为561.09&#xff0c;选择cuda版本&#xff0c;下图可知cuda版本<12.6。 nvidia-smi #查看驱动版本&#xff0c;以及最大可以安装的cuda版本 2、Anaconda3-2024.06-1-Windows-x86_64.exe下载&#xff1a; 官网&#xff1a;https://www.baidu.com/link?…

php的require() 和 require_once() 之间的主要区别

PHP 中的 require() 和 require_once() 语句都用于在执行脚本之前插入一个文件的内容到另一个文件中。然而&#xff0c;它们之间有一个关键的区别&#xff0c;这个区别主要体现在它们如何处理被包含文件的重复包含问题上。 require()&#xff1a; 当使用 require() 语句时&…

C语言 | Leetcode C语言题解之第419题棋盘上的战舰

题目&#xff1a; 题解&#xff1a; int countBattleships(char** board, int boardSize, int* boardColSize){int row boardSize;int col boardColSize[0];int ans 0;for (int i 0; i < row; i) {for (int j 0; j < col; j) {if (board[i][j] X) {if (i > 0 &…

江协科技STM32学习- P14 示例程序(定时器定时中断和定时器外部时钟)

&#x1f680;write in front&#x1f680; &#x1f50e;大家好&#xff0c;我是黄桃罐头&#xff0c;希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流 &#x1f381;欢迎各位→点赞&#x1f44d; 收藏⭐️ 留言&#x1f4dd;​…

卡车配置一键启动无钥匙进入手机控车

‌ 卡车智能一键启动无钥匙进入手机控车&#xff0c;通过手机应用程序与汽车内置硬件、软件的无线通信&#xff0c;实现对汽车的远程控制‌。 卡车改装一键启动的步骤包括安装门把手的感应装置、拆卸仪表台和门板&#xff0c;取出内部的待接线束&#xff0c;并将一键启动…

spring与springmvc整合

文章目录 spring与springmvc整合重复创建bean容器关系获取spring容器上下文 spring与springmvc整合 在项目中使用springmvc的时候&#xff0c;由于spring和springmvc是同源的&#xff0c;有时候大家会把所有的配置都扔到springmvc的配置文件中&#xff0c;而不去区分spring和s…