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

javascript 复制代码
  // 设置选中节点
  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;
          }
        });
      }
    });
  };

修改为

javascript 复制代码
  // 设置选中节点
  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'){
        // 修改部分 start
        for (let item of checkedId) {
          if(input.val()==item){
            input.prop("checked",true);//这里留意input的对应关系
            input.next().addClass("layui-form-checked");
          }
        }
        // 修改部分 end
      }
    });
  };
相关推荐
万少5 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站7 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名10 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫10 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊10 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter10 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折10 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_10 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
Angelial11 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
jiayu11 小时前
Angular学习笔记24:Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
前端