采用 layui 树形组件,版本:V2.6.8。只需要更新layui版本,不需要下载tableSelect。
原作者博客:https://blog.csdn.net/m0_67402588/article/details/123526860。
从 官网 更新日志可以看到,树形组件在2.5.7版本还在更新,且2.4.X版本这个功能还未增加,直接下载最新版就不会出现不必要的错误啦。
效果展示:
目录
一、引入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");