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

        样式部分可以自己调整。

<link rel="stylesheet" type="text/css" href="../../plugins/layui2.6.8/css/layui.css" />
<style type="text/css">
  .layui-form-select dl { padding: 0; }
  .treeSelect.layui-form-select dl dd:hover{background-color:#fff;}
  .treeSelect.layui-form-select dl dd, .layui-form-select dl dt{padding-bottom: 10px;}
</style>

<script src="../../plugins/layui2.6.8/layui.js" type="text/javascript" charset="utf-8"></script>


<div class="layui-form-item">
  <div class="layui-inline" style="margin-right: 0px;">
    <label class="layui-form-label"><em class="must">*</em>上级菜单:</label>
    
    <div class="layui-inline">
      <div class="layui-unselect layui-form-select treeSelect">
        <div class="layui-select-title">
            <span class="layui-input layui-unselect" id="treeclass">选择上级菜单</span>
            <input type="hidden" name="selectID" class="preMenuId">
            <i class="layui-edge" style="right: 20px;"></i>
        </div>
        <dl class="layui-anim layui-anim-upbit">
            <dd>
                <ul id="meuntree"></ul>
            </dd>
        </dl>
      </div>
    </div>

  </div>                
</div>

二、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");