本文详细介绍layui树形菜单组件的使用方法，包括版本升级、组件引入、代码示例及节点操作，适用于系统菜单、省级关系等场景，帮助开发者快速上手。
官网链接：https://www.layui.com/doc/modules/tree.html
树形菜单可以帮助我们很好的进行分级数据展示，例如系统菜单、省级关系，上下级关系等等，那么layui的tree将是你的不二选择。如果你对这个组件感兴趣，请继续往下看！
目录：
- 升级layui的版本为2.5（自行到layui官网进行下载，解压后放到你的项目对应文件夹即可）
- 引入layui.tree组件
- 效果图
- 对layui.tree的节点进行操作（注意：修改节点只能修改节点名称，其他的暂时不能修改，官方还在对组件进行升级）
具体步骤如下：
1. 很简单，就不细说了
2 .引入组件（这里是官方例子，我的具体代码会在后面贴出来）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>树组件</title>
<link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<-- 用于展示树形--!>
<div id="test1"></div>
<script src="../src/layui.js"></script>
<script>
layui.use('tree', function(){
var tree = layui.tree;
//渲染
var inst1 = tree.render({
elem: '#test1' //绑定元素
,data: [{
title: '江西' //一级菜单
,children: [{
title: '南昌' //二级菜单
,children: [{
title: '高新区' //三级菜单
//…… //以此类推，可无限层级
}]
}]
},{
title: '陕西' //一级菜单
,children: [{
title: '西安' //二级菜单
}]
}]
});
});
</script>
</body>
</html>
3. 效果图
4. 对layui.tree节点进行操作（完整代码）
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>权限管理</title>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<link rel="stylesheet" href="${APP_PATH}/layui-v2.4.5/layui/css/layui.css">
<link rel="stylesheet" href="${APP_PATH}/css/font-awesome.min.css">
<link rel="stylesheet" href="${APP_PATH}/bootstrap-3.3.7/css/bootstrap.min.css">
<style type="text/css">
.tree li {
list-style-type: none;
cursor:pointer;
}
table tbody tr:nth-child(odd){background:#F4F4F4;}
table tbody td:nth-child(even){color:#C00;}
a:hover{
text-decoration:none;
}
.layui-input{
width:263px;
display:inline;
}
.layui-form-select .layui-edge{
position: absolute;
right: 5px;
top: 19px;
}
a:hover{
text-decoration:none;
}
.hide {
display: none;
}
.layui-iconpicker-item{
width:263px !important;
margin-left: 108px;
}
.layui-iconpicker-icon{
width: 177px !important;
}
.layui-iconpicker-item > .layui-edge{
margin-left: 143px;
}
.layui-anim-upbit{
margin-left: 102px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>菜单树 </h3>
</div>
<div class="col-md-12">
<div class="change-pas-box">
<div class="panel panel-default">
<div class="panel-body">
<div id="permissionTree" ></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--添加菜单弹窗-->
<div style="display: none;" id="addPermissionArea" class="change-pas-box">
<form class="layui-form" id="addPermissionForm" action="">
<div class="layui-form-item">
<label class="layui-form-label" style="margin-top:15px;width:90px;">菜单名称:</label>
<div class="layui-input-block">
<input type="text" name="title" id="addTitle" class="layui-input" style="margin-top:15px;">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">路径:</label>
<div class="layui-input-block">
<input type="text" name="url" id="addUrl" placeholder="例如：user/index" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" >图标:</label>
<input type="text" id="iconPicker" lay-filter="iconPicker" style="margin-left:256px;">
<!-- <div class="layui-input-block" style="width:263px;">
<select name="icon" lay-search id="addIcon">
<option value="0" selected>普通用户</option>
<option value="1" >系统管理员<i class='layui-icon layui-icon-face-smile'/></option>
</select>
</div> -->
</div>
<div class="layui-form-item">
<label class="layui-form-label">状态:</label>
<div class="layui-input-block">
<input type="radio" name="status" value="1" title="启用" checked>
<input type="radio" name="status" value="0" title="禁用" >
</div>
</div>
</form>
</div>
<script src="${APP_PATH}/js/jquery-2.1.1.min.js"></script>
<script src="${APP_PATH}/js/iconData.js"></script>
<script src="${APP_PATH}/layui-v2.4.5/layui/layui.js"></script>
<script src="${APP_PATH}/script/docs.min.js"></script>
<script src="${APP_PATH}/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/module/common.js"></script>
<script type="text/javascript">
var treeData=[];
$(function(){
// 加载数据源
$.ajax({
type : "POST",
url : "${APP_PATH}/permission/loadTreeData",
dataType : "json",
contentType:"application/json;UTF-8",
success : function(result) {
if ( result.success) {
treeData = result.data;
// 遍历循环显示图标
var iconArr = JSON.parse(JSON.stringify(iconData));
$.each(iconArr,function(index){
$("#addIcon").append("<option value='" + iconArr[index].icon +"'>" + iconArr[index].name + "<i class='layui-icon layui-icon-face-smile'></i></option>");
});
}
}
});
// 初始化layui组件
layui.use(['iconPicker','form','tree','layer'], function(){
var tree = layui.tree,
layer = layui.layer,
form = layui.form,
iconPicker = layui.iconPicker;
// 加载图标组件
iconPicker.render({
// 选择器，推荐使用input
elem: '#iconPicker',
// 数据类型：fontClass/unicode，推荐使用fontClass
type: 'fontClass',
// 是否开启搜索：true/false
search: true,
// 是否开启分页：true/false，默认true
page: true,
// 每页显示数量，默认12
limit: 12,
// 点击回调
click: function (data) {
console.log(data);
}
});
/**
* 选中图标 （常用于更新时默认选中图标）
* @param filter lay-filter
* @param iconName 图标名称，自动识别fontClass/unicode
*/
iconPicker.checkIcon('iconPicker', 'layui-icon-star-fill');
//渲染
var inst1 = tree.render({
elem: '#permissionTree' //绑定元素
,data:treeData
,edit: ['add', 'update', 'del']
,operate: function(obj){
var type = obj.type; //得到操作类型：add、edit、del
var data = obj.data; //得到当前节点的数据
//Ajax 操作
var id = data.id; //得到节点索引
if(type === 'add'){
layer.open({
type:1,
area:['500px', '420px'],
title: '添加菜单信息',
content: $("#addPermissionArea"),
btn: ['提交', '取消'],
yes: function(index, layero){
var permission ={};
var title =$.trim($("#addTitle").val());
var url= $.trim($("#addUrl").val());
var icon= $("#iconPicker").val();
var status = parseInt($("input[name='status']:checked").val());
permission.title =title;
permission.url = url;
permission.icon = icon;
permission.status = status;
permission.pid = id;
if(title == "" || title ==null){
layer.msg("菜单名称不能为空", {time:1000, icon:5,shift:6,}, function(){
});
return false;
}
if(title.length<1 || title.length >15){
layer.msg("菜单名称在1-15个字符内", {time:1000, icon:5,shift:6,}, function(){
});
return false;
}
if(url == "" || url ==null){
layer.msg("菜单路径不能为空", {time:1000, icon:5,shift:6,}, function(){
});
return false;
}
if(title.length<1 || title.length >30){
layer.msg("菜单路径在1-30个字符内", {time:1000, icon:5,shift:6,}, function(){
});
return false;
}
//添加菜单（权限）
var loadingIndex = null;
$.ajax({
type : "POST",
url : "${APP_PATH}/permission/add",
data : JSON.stringify(permission),
dataType : "json",
contentType:"application/json;UTF-8",
beforeSend : function() {
loadingIndex = layer.msg('处理中', {icon: 16});
},
success : function(result) {
layer.close(loadingIndex);
if ( result.success) {
layer.msg(result.msg, {time:1000, icon:6}, function(){
layer.close(index);
location.reload();
});
} else {
layer.msg(result.msg, {time:2000, icon:5, shift:6}, function(){
// $("#addPermissionArea").css({"display":"none"});
});
}
}
});
}
,btn2:function(index,layero){
$("#addPermissionArea").css({"display":"none"});
location.reload();
}
,cancel: function(layero,index){
layer.closeAll();
$("#addPermissionArea").css({"display":"none"});
location.reload();
}
});
} else if(type === 'update'){
console.log("update",12345);
var permission ={};
permission.id = data.id;
permission.title =data.title;
permission.url = data.url;
permission.icon = data.icon;
permission.status = data.status;
permission.pid = data.pid;
//添加菜单（权限）
var loadingIndex = null;
$.ajax({
type : "POST",
url : "${APP_PATH}/permission/update",
data : JSON.stringify(permission),
dataType : "json",
contentType:"application/json;UTF-8",
beforeSend : function() {
loadingIndex = layer.msg('处理中', {icon: 16});
},
success : function(result) {
layer.close(loadingIndex);
if ( result.success) {
layer.msg(result.msg, {time:1000, icon:6}, function(){
layer.close(index);
location.reload();
});
} else {
layer.msg(result.msg, {time:2000, icon:5, shift:6}, function(){
// $("#addPermissionArea").css({"display":"none"});
});
}
}
});
} else if(type === 'del'){ //删除节点
//向服务端发送删除指令
$.ajax({
type:"post",
url:"${APP_PATH}/permission/deleteById",
data:{id:id},
async:false,
dataType:"json",
success:function(result){
if(result.success){
//删除对应行（tr）的DOM结构
layer.msg(result.msg,{time:2000,icon:6});
location.reload();
}else{
layer.msg(result.msg,{time:2000,icon:5});
}
},
error:function(result){
layer.msg('处理异常，请联系管理员',{time:2000,icon:5});
}
});
};
}
});
});
});
</script>
</body>
</html>使用注意事项：注意接口返回的数据格式，否则会动态加载失败，实在弄不懂的可以留言哦
| 属性选项 | 说明 | 类型 | 示例值 |
|---|---|---|---|
| title | 节点标题 | String | 未命名 |
| id | 节点唯一索引值，用于对指定节点进行各类操作 | String/Number | 任意唯一的字符或数字 |
| field | 节点字段名 | String | 一般对应表字段名 |
| children | 子节点。支持设定选项同父节点 | Array | [{title: '子节点1', id: '111'}] |
| href | 点击节点弹出新窗口对应的 url。需开启 isJump 参数 | String | 任意 URL |
| spread | 节点是否初始展开，默认 false | Boolean | true |
| checked | 节点是否初始为选中状态（如果开启复选框的话），默认 false | Boolean | true |
| disabled | 节点是否为禁用状态。默认 false | Boolean | false |
扫一扫
1594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
