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
      }
    });
  };
相关推荐
kyriewen4 分钟前
别再这样写 async/await 了:我在 Code Review 中见过最多的 8 个错误
前端·javascript·面试
hoLzwEge21 分钟前
node-linker VS shamefully-hoist
前端·前端框架
袋鱼不重27 分钟前
解决 Web 端图片预览与下载颜色不一致的一种工程方案
前端·后端
风止何安啊33 分钟前
教你用 JS + AI 实现简单的爬虫,零门槛爬取网页信息
前端
cidy_9834 分钟前
codebase-memory-mcp 新手完全教程:让 AI 真正「理解」你的代码库
前端
牛奶41 分钟前
HTTPS你不知道的事
前端·https·浏览器
小小小小宇43 分钟前
前端 Vue 如何避免不必要的子组件渲染全解析
前端
cidy_982 小时前
codebase-memory-mcp 安装教程
前端
mt_z2 小时前
Webpack 与 Vite 完全指南
前端
灏仟亿前端技术团队2 小时前
B 端多弹窗越来越难维护?试试把弹窗交互 Promise 化
前端