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
      }
    });
  };
相关推荐
IT_陈寒22 分钟前
Vue这个特性差点让我加班到凌晨,谁懂啊
前端·人工智能·后端
kyriewen26 分钟前
我让AI改一个bug——它偷偷动了5个我没让它碰的地方
前端·javascript·ai编程
遇乐的果园1 小时前
前端学习笔记-vue加载渲染优化
前端·笔记·学习
用户985033593282 小时前
OpenLayers 热力图从原理到 Vue 组件一键接入
前端
颜酱2 小时前
01 | 骨架搭建:FastAPI + Vue 跑通第一个 SSE 流式问答
前端·人工智能·后端
hoLzwEge2 小时前
解码 IDE 智能提示:jsconfig.json 辅助开发全攻略
前端·前端框架
leoZ2312 小时前
记忆系统与 Agent 定制完全指南(四):自定义 Agent 开发(一)
前端·chrome
慧一居士2 小时前
Element Plus 按需引入的配置使用说明和完整示例
前端·vue.js
程序员黑豆2 小时前
鸿蒙应用开发实战:从零学会自定义组件
前端·华为·harmonyos
leoZ2312 小时前
记忆系统与 Agent 定制完全指南(三):记忆的检索与使用
前端·chrome