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
      }
    });
  };
相关推荐
奶糖 肥晨3 小时前
前端Bug实录:为什么表格筛选条件在刷新时神秘消失?
前端·bug
樱花落海洋1113 小时前
layui 表格行级 upload 上传操作
前端·javascript·layui
艾小码3 小时前
告别复制粘贴!掌握这7个原则,让你的Vue组件复用性翻倍
前端·javascript·vue.js
我是ed6 小时前
# vite + vue3 实现打包后 dist 文件夹可以直接打开 html 文件预览
前端
小白64027 小时前
前端梳理体系从常问问题去完善-工程篇(webpack,vite)
前端·webpack·node.js
不老刘7 小时前
从构建工具到状态管理:React项目全栈技术选型指南
前端·react.js·前端框架
mCell9 小时前
ECharts 万字入门指南
前端·echarts·数据可视化
X01动力装甲9 小时前
@scqilin/phone-ui 手机外观组件库
前端·javascript·ui·智能手机·数据可视化
Dontla9 小时前
Edge浏览器CSDN文章编辑时一按shift就乱了(Edge shift键)欧路翻译问题(按Shift翻译鼠标所在段落)
前端·edge