layui 树形组件下拉框

         采用 layui 树形组件，版本：V2.6.8。只需要更新layui版本，不需要下载tableSelect。

        原作者博客：https://blog.csdn.net/m0_67402588/article/details/123526860。

         从 官网 更新日志可以看到，树形组件在2.5.7版本还在更新，且2.4.X版本这个功能还未增加，直接下载最新版就不会出现不必要的错误啦。

效果展示：

---

目录

一、引入css、js

二、js

 需要的数据格式示范：

 js代码：

三、下拉框回显以及禁用

---

一、引入css、js

        样式部分可以自己调整。

  

    *上级菜单:
    
    

      

        

            选择上级菜单
            
            
        
        

            

                

            
        
      
    

  
                

二、js

 需要的数据格式示范：

data2 = [{
    title: '早餐'
    ,id: 1
    ,children: [{
      title: '油条'
      ,id: 5
    },{
      title: '包子'
      ,id: 6
    },{
      title: '豆浆'
      ,id: 7
    }]
  },{
    title: '午餐'
    ,id: 2
    ,checked: true
    ,children: [{
      title: '藜蒿炒腊肉'
      ,id: 8
    },{
      title: '西湖醋鱼'
      ,id: 9
    },{
      title: '小白菜'
      ,id: 10
    },{
      title: '海带排骨汤'
      ,id: 11
    }]
  },{
    title: '晚餐'
    ,id: 3
    ,children: [{
      title: '红烧肉'
      ,id: 12
      ,fixed: true
    },{
      title: '番茄炒蛋'
      ,id: 13
    }]
  },{
    title: '夜宵'
    ,id: 4
    ,children: [{
      title: '小龙虾'
      ,id: 14
      ,checked: true
    },{
      title: '香辣蟹'
      ,id: 15
      ,disabled: true
    },{
      title: '烤鱿鱼'
      ,id: 16
    }]
  }];

 js代码：

layui.use(['form', 'layer', 'element', 'tree','util'], function () {
  var form = layui.form; 
  var layer = layui.layer;
  var element = layui.element; 
  var tree = layui.tree, util = layui.util;

  //初始化菜单树，点击某一列赋值显示到input框上
  ajax.post("/web/user/role/elements", {token: sessionStorage.getItem('token')}, function(res){
    var treeData = recureFn(res.list);
    treeData.unshift({
      id: 0,
      title: "无上级菜单",
      children: []
    })
    tree.render({
      elem: "#meuntree",
      data: treeData,
      click: function(obj){
        // layer.msg(JSON.stringify(obj.data));
        var $select = $(".layui-form-select");
        $select.removeClass("layui-form-selected").find(".layui-select-title span").html(obj.data.title).end().find("input:hidden[name='selectID']").val(obj.data.id);
        form.render();
      }
    })
  });

  //点击显示/隐藏树形下拉框
  $(".treeSelect").on("click", ".layui-select-title", function (e) {
    $(this).parents(".treeSelect").toggleClass("layui-form-selected");
    layui.stope(e); 
  }).on("click", "dl ul span.layui-tree-iconClick", function (e) {
      layui.stope(e);//阻止事件冒泡，即点击span小图标展开时不触发父级逻辑
  });

  //递归处理树形数组
  function recureFn( arr ){
    var result = [];
      arr.map( item=>{   
        var option = {
          title: item.menuName,
          id: item.id,
          children: recureFn( item.children )
        }
        // if( item.children.length!=0 ) delete option.checked; //只给最底层添加checked
        result.push( option );
      });                       
    return result;                
  }

})

三、下拉框回显以及禁用

        修改时输入框显示默认值。

//输入框显示
var $select = $(".layui-form-select.treeSelect");
$select.removeClass("layui-form-selected").find(".layui-select-title span").html(res.data.menuName).end().find("input:hidden[name='selectID']").val(res.data.id);

//禁用
$(".layui-form-select.treeSelect").off("click");  //解绑click事件 
$("#treeclass").addClass("layui-disabled");