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
      }
    });
  };
相关推荐
佛系打工仔10 小时前
绘制K线第二章:背景网格绘制
android·前端·架构
明天好,会的12 小时前
分形生成实验(五):人机协同破局--30万token揭示Actix-web状态管理的微妙边界
运维·服务器·前端
C_心欲无痕12 小时前
nginx - alias 和 root 的区别详解
运维·前端·nginx
我是苏苏14 小时前
Web开发:C#通过ProcessStartInfo动态调用执行Python脚本
java·服务器·前端
无羡仙15 小时前
Vue插槽
前端·vue.js
用户63879947730515 小时前
每组件(Per-Component)与集中式(Centralized)i18n
前端·javascript
SsunmdayKT15 小时前
React + Ts eslint配置
前端
开始学java16 小时前
useEffect 空依赖 + 定时器 = 闭包陷阱?count 永远停在 1 的坑我踩透了
前端
zerosrat16 小时前
从零实现 React Native(2): 跨平台支持
前端·react native