当前位置: 首页 > news >正文

layui tree组件回显bug问题,父级元素选中导致子集全部选中

layui组件回显不过,父级元素选中导致子集全部选中

    1、适用动态渲染tree.setChecked方法选中
2、适用直接渲染data数据携带checked选中

比如

用tree.setChecked(‘demoId’, menu) 回显结果

menu = [1,29,42,35,37]

而且使用tree.setChecked方法选中的时候,如果有写oncheck回调必定会触发,比较不便

修改的方法

找到你的tree.js全局搜索 setChecked

  // 设置选中节点Class.prototype.setChecked = function(checkedId){var that = this;var options = that.config;// 初始选中that.elem.find('.'+ELEM_SET).each(function(i, item){var thisId = $(this).data('id');var input = $(item).children('.'+ELEM_ENTRY).find('input[same="layuiTreeCheck"]');var reInput = input.next();// 若返回数字if(typeof checkedId === 'number'){if(thisId.toString() == checkedId.toString()){if(!input[0].checked){reInput.click();};return false;};}// 若返回数组else if(typeof checkedId === 'object'){layui.each(checkedId, function(index, value){if(value.toString() == thisId.toString() && !input[0].checked){reInput.click();return true;}});}});};

修改为

  // 设置选中节点Class.prototype.setChecked = function(checkedId){var that = this;var options = that.config;// 初始选中that.elem.find('.'+ELEM_SET).each(function(i, item){var thisId = $(this).data('id');var input = $(item).children('.'+ELEM_ENTRY).find('input[same="layuiTreeCheck"]');var reInput = input.next();// 若返回数字if(typeof checkedId === 'number'){if(thisId.toString() == checkedId.toString()){if(!input[0].checked){reInput.click();};return false;};}// 若返回数组else if(typeof checkedId === 'object'){// 修改部分 startfor (let item of checkedId) {if(input.val()==item){input.prop("checked",true);//这里留意input的对应关系input.next().addClass("layui-form-checked");}}// 修改部分 end}});};

http://www.dtcms.com/a/388892.html

相关文章:

  • centos7上使用Docker+ RagFlow + ollama + 数据集 搭建自己的AI问答机器人(2025-09)
  • # 从 Gymnasium 到 Minari:新一代机器人强化学习工具链全指南
  • 系统架构设计师备考第27天——基于构件的软件工程
  • Centos下安装docker
  • OpenAPI 规范:构建高效 RESTful API 指南
  • 基于 AForge.NET 的 C# 人脸识别
  • SQLite与ORM技术解析
  • vue动态时间轴:交互式播放与进度控制
  • Java I/O三剑客:BIO vs NIO vs AIO 终极对决
  • AI 在视频会议防诈骗方面的应用
  • nest.js集成服务端渲染(SSR)
  • AI如何“听懂人话”?从语音识别到语义理解的最后一公里
  • 鸿蒙:Preferences持久化实现方案
  • 常温超导新突破!NixCu-O7材料设计引领能源革命(续)
  • 常温超导新突破!NixCu-O7材料设计引领能源革命
  • C++,C#,Rust,Go,Java,Python,JavaScript的性能对比
  • 《从崩溃到精通:C++ 内存管理避坑指南,详解自定义类型 new/delete 调用构造 / 析构的关键逻辑》
  • 鸿蒙:父组件调用子组件的三种方案
  • AppTest邀请测试 -邀请用户
  • 从零开始的云计算生活——第六十五天,鹏程万里,虚拟化技术
  • Java 开发指南:将 PDF 转换为多种图片格式
  • 【C++革命】董翔箭头函数库(xiang_arrow):在main函数里定义函数的终极方案
  • Ubuntu显示No operation system found
  • 【深度学习新浪潮】音频大模型方面有哪些最新的研究进展?
  • 第3节 创建视频素材时间线到剪映(Coze扣子空间剪映小助手零基础教程)
  • Unifi AP 网络路由取消使用 无线 Meshing
  • 计算机网络基础(四) --- TCP/IP网络结构(网络层) (上)
  • AR巡检与区块链融合:工业智能化的新引擎
  • Product Hunt 每日热榜 | 2025-09-18
  • WPF 字符竖向排列的排版格式(直排)显示控件