1.简介
也许你对树菜单再熟悉不过了，然而你仍有可能更青睐layui的tree，它也许比以往你知道的任何一个类似的组件都更轻量、简单，你在享受许多功能的同时，甚至不用去记太多的参数。
另外，最大的重点在于，她在UI上完全遵循于当下主流的风格，并且具备高度可扩展性，会与你的许多页面非常融洽的并存。
2.制作如下案例
步骤1.编写html
<div class="layui-inline input-width" style="width: 450px;">
<label class="layui-form-label"><span class="fcred">*</span>上级菜单:</label>
<div class="layui-input-inline">
<div class="layui-unselect layui-form-select downpanel">
<div class="layui-select-title" align="center">
<span class="layui-input layui-unselect" id="treeclass" style="width: 269px;">--请选择--</span>
<input id="pid" type="hidden" name="selectID" value="0">
<i class="layui-edge"></i>
</div>
<dl class="layui-anim layui-anim-upbit">
<dd>
<ul id="classtree"></ul>
</dd>
</dl>
</div>
</div>
</div>
步骤2.初始话树与加载数据
layui.use(['element', 'tree', 'layer', 'form', 'upload'], function () {
var $ = layui.jquery, tree = layui.tree;
loadMenuTree(tree);
$(".downpanel").on("click", ".layui-select-title", function (e) {
$(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
$(this).parents(".downpanel").toggleClass("layui-form-selected");
layui.stope(e);
}).on("click", "dl i", function (e) {
layui.stope(e);
});
$(document).on("click", function (e) {
$(".layui-form-select").removeClass("layui-form-selected");
});
});
function loadMenuTree(tree) {
var url = "permission/menuDataLayUiTree";
var params = {};
uwillBeAsyncTrue.getdata(url, params, function (data) {
tree({
elem: "#classtree",
nodes: data,
click: function (node) {
var $select = $($(this)[0].elem).parents(".layui-form-select");
$select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='selectID']").val(node.id);
}
});
});
}
附件:
1.前端代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="UTF-8">
<title>菜单管理</title>
<link rel="stylesheet" href="static/layui/css/layui.css">
<link rel="stylesheet" href="static/css/common.css">
<link rel="stylesheet" href="static/css/schoolInfo.css">
<link rel="stylesheet" href="static/css/teacherInfo.css">
<!--[if IE 8]>
<!-- <link rel="stylesheet" type="text/css" href="static/css/ie.css"/>-->
<link rel="stylesheet" type="text/css" href="static/zTree/css/zTreeStyle/zTreeStyle.css"/>
<%-- <link rel="stylesheet" type="text/css" href="static/zTree/css/demo.css"/>--%>
<style type="text/css">
.downpanel .layui-select-title span {
line-height: 38px;
} /*继承父类颜色*/
.downpanel dl dd:hover {
/* background-color: inherit;*/
}
</style>
<style type="text/css">
body {
height: 100%;
width: 100%;
background-size: cover;
margin: 0 auto;
} td {
font-size: 12px !important;
} .layui-form-checkbox span {
height: 30px;
} .layui-field-title {
border-top: 1px solid white;
} table {
width: 100% !important;
} .input-width {
width: 360px;
} .input-widthC {
width: 369px;
} </style>
</head>
<body class="content">
<div id="app">
<div class="xy-backdrop" hidden onclick="showFlashDialog()"><img src="static/images/loding.gif"></div>
<p class="p-title"></p>
<form class="layui-form row-between form">
<%--左侧--%>
<div class="form-left fl layui-form" style="width: 400px;">
<div class="b-bottom">
<%-- <p class="text-title">菜单信息</p>--%>
<div class="layui-inline search-nobor" style="margin-top: 10px;">
<p class="layui-btn layui-btn-radius bg-org box-shaow-org" lay-filter="add" id="add"
style="width: 120px;">新增</p>
</div> <div class="layui-form-item mt30">
<div class="layui-inline" style="height: 400px">
<ul id="treeDemo" class="ztree" style="margin-top: 10px; width: 200px; height: 150px;">
</ul>
</div>
</div>
</div>
</div> <%--右侧--%>
<div id="rightEditId" style="display:none;" class="form-right fl layui-form">
<p class="text-title">编辑菜单</p>
<div class="flex-start b-bottom mt30">
<div class="layui-form-item ">
<div class="layui-inline">
<label class="layui-form-label"><span class="fcred">*</span>菜单名称:</label>
<div class="layui-input-block wh20 input-widthC">
<input id="menuName" type="text" name="menuName" maxlength="10" lay-verify="name"
onkeydown="if(event.keyCode==32) return false" autocomplete="off" placeholder="菜单名称"
class="layui-input" value="${menuUpdate.menuName}">
</div>
</div> <br/>
<br/> <div class="layui-inline input-width" style="width: 450px;">
<label class="layui-form-label"><span class="fcred">*</span>上级菜单:</label>
<div class="layui-input-inline">
<div class="layui-unselect layui-form-select downpanel">
<div class="layui-select-title" align="center">
<span class="layui-input layui-unselect" id="treeclass" style="width: 269px;">--请选择--</span>
<input id="pid" type="hidden" name="selectID" value="0">
<i class="layui-edge"></i>
</div>
<dl class="layui-anim layui-anim-upbit">
<dd>
<ul id="classtree"></ul>
</dd>
</dl>
</div>
</div>
</div> <br/>
<br/> <div class="layui-inline">
<label class="layui-form-label"><span class="fcred"></span>url地址:</label>
<div class="layui-input-block wh20 input-widthC">
<input id="menuUrl" type="text" name="menuUrl" maxlength="30" lay-verify="name"
onkeydown="if(event.keyCode==32) return false" autocomplete="off"
placeholder="url地址:(选填)"
class="layui-input" value="${menuUpdate.menuUrl}">
</div>
</div> <br/>
<br/> <div class="layui-inline">
<label class="layui-form-label"><span class="fcred"></span>排序:</label>
<div class="layui-input-block wh20 input-widthC">
<input id="menuOrder" type="text" name="menuOrder" maxlength="3" lay-verify="name"
onkeydown="if(event.keyCode==32) return false" autocomplete="off"
placeholder="排序:(选填)"
class="layui-input" value="${menuUpdate.menuOrder}" oninput="value=value.replace(/[^\d]/g,'')" >
</div>
</div> <br/>
<br/> <div class="layui-inline">
<label class="layui-form-label"><span class="fcred"></span>图标地址:</label>
<div class="layui-input-block wh20 input-widthC">
<input id="menuIcon" type="text" name="menuIcon" maxlength="10" lay-verify="name"
onkeydown="if(event.keyCode==32) return false" autocomplete="off"
placeholder="图标地址:(选填)"
class="layui-input" value="${menuUpdate.menuIcon}">
</div>
</div> <br/>
<br/> </div>
</div> <!--修改信息-->
<input id="id" name="id" value="" hidden/>
<%-- <input id="pid" value="" hidden>--%>
<input id="type" name="type" value="" hidden/>
<div class="layui-form-item text-center">
<p id="myButton" type="submit"
class="layui-btn layui-btn-radius bg-org box-shaow-org wh135px" lay-submit=""
lay-filter="demoRole">保存
</p>
</div>
</div>
</form> </div>
<script src="static/layui/layui.js"></script>
<script src="static/js/jquery-1.8.3.js"></script>
<script src="static/js/public.js"></script>
<script src="static/js/jquery.form.js"></script>
<script type="text/javascript" src="static/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="static/zTree/js/jquery.ztree.core.js"></script>
<%--<script type="text/javascript" src="static/zTree/js/jquery.ztree.all.min.js"></script>--%>
<%--<script type="text/javascript" src="static/js/common/menu.js"></script>--%>
<script src="static/zTree/js/jquery.ztree.excheck.js"></script>
<script src="static/zTree/js/jquery.ztree.exedit.js"></script> <script type="text/javascript">
var aa = {aa: 1};
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var imgAA = 0; var teacherImg, layer, form;
layui.use(['form'], function () {
form = layui.form;
layer = layui.layer; //监听提交
form.on('submit(demoRole)', function (data) { });
}); function createTree(url, params, treeId) {
var zTree; //用于保存创建的树节点
var setting = { //设置
view: {
// addHoverDom: addHoverDom, //控制是否显示添加按钮
// removeHoverDom: removeHoverDom,
showLine: true, //显示辅助线
selectedMulti: false, //设置是否允许同时选中多个节点
showLine: true, //设置是否显示节点与节点之间的连线
showTitle: false, //设置是否显示节点的title提示信息
dblClickExpand: true
},
edit: {
showRemoveBtn: true, //是否显示移除按钮
showRenameBtn: false,
enable: true, //控制是否可以拖拽
drag: {
isCopy: false, //拖拽时, 设置是否允许复制节点
isMove: false //拖拽时, 设置是否允许移动节点
}
},
callback: {
beforeRemove: zTreeBeforeRemove, //删除之前回调函数
// beforeRename: zTreeBeforeRename //修改之前回调函数
onClick: zTreeOnClick
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pid",
rootPId: 0
}
}
};
$.ajax({ //请求数据,创建树
type: 'GET',
url: url,
data: params,
dataType: "json", //返回的结果为json
success: function (data) {
zTree = $.fn.zTree.init($(treeId), setting, data); //创建树
},
error: function (data) {
alert("创建树失败!");
}
});
} function addDiyDom(treeId, treeNode) {
var aObj = $("#" + treeNode.tId + "_a");
if ($("#diyBtn_" + treeNode.id).length > 0) return;
var editStr = "<span id='diyBtn_space_" + treeNode.id + "' > </span>"
+ "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.id
+ "' title='" + treeNode.name + "' onfocus='this.blur();'></button>";
aObj.append(editStr);
var btn = $("#diyBtn_" + treeNode.id);
if (btn) btn.bind("click", function () {
alert("diy Button for " + treeNode.name);
});
}
;
var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();' ></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);
if (btn) btn.bind("click", function () {
var pid = treeNode.id;
// type=1新增 type=2 修改
openEditMenu('新增菜单', pid, 1);
return false;
});
}
;
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
}
/**
* 打开右侧 编辑框
* */
$("#add").click(function () {
$("#rightEditId").show();
//清空原有的数据
$("input").val("");
$("#treeclass").html("--请选择--");
//设置 type 区分修改还是新增
$("#type").val(1); });
function openEditMenu(title, pid, type) {
layer.open({
type: 2,
title: title,
maxmin: true,
shade: 0.4,
area: ['80%', '80%'],
content: "<%=basePath%>permission/editMenu?pid=" + pid + "&type=" + type
});
$(".layui-layer-min").remove();
}
/**
* 确定删除
* */
function zTreeBeforeRemove(treeId, treeNode) {
//隐藏右侧框
$("#rightEditId").hide();
var nodeP = treeNode.isParent;
var id;
if (nodeP) {
id=-2;
}else {
id=treeNode.mid;
}
layer.confirm('确定要删除节点[' + treeNode.name + ']吗?', function (index) {
$.ajax({
type: "POST",
url: '<%=basePath%>permission/deleteMenu',
data: {"id": id, timestamp: (new Date()).valueOf()},
dataType: 'json',
cache: false,
success: function (data) {
if (data.code == '0000') {
layer.alert("删除成功", {icon: 1});
initTree();
}else if (data.code == '9998'){
layer.alert(data.msg, {icon: 2});
}else {
layer.alert("删除失败", {icon: 2});
}
}
});
}); return false;
}
/**
* 执行删除
* */
function doRemove(treeNode) { }
/**
* 点击回调函数 用于修改使用
* @param treeId
* @param treeNode
* @returns {boolean}
*/
function zTreeOnClick(event, treeId, treeNode) {
var mid = treeNode.mid;
var mpid = treeNode.mpid;
var nodeP = treeNode.getParentNode();
var nameP;
if (nodeP == null) {
nameP = '--请选择--';
} else {
nameP = nodeP.name;
}
$("#rightEditId").show();
//清空原有的数据
$("input").val("");
$("#treeclass").html("--请选择--");
//设置 type 区分修改还是新增
//数据回显 $("#id").val(mid);
$("#pid").val(mpid);
$("#menuName").val(treeNode.name);
$("#treeclass").html(nameP);
$("#menuUrl").val(treeNode.menuUrl);
$("#menuOrder").val(treeNode.menuOrder);
$("#menuIcon").val(treeNode.menuIcon);
$("#type").val(2);
}
function initTree() {
var params = {
roleId: -1
};
createTree("permission/menuData", params, "#treeDemo");//创建
}
initTree(); /*修改或新增js*/
/**
* 保存选中的数据
*/
$("#myButton").click(function () {
updateOrAddMenu();
});
function updateOrAddMenu() {
var id = $("#id").val();
var pid = $("#pid").val();
var menuName = $("#menuName").val();
var menuUrl = $("#menuUrl").val();
var menuOrder = $("#menuOrder").val();
var menuIcon = $("#menuIcon").val();
var type = $("#type").val();
var params = {
id: id,
pid: pid,
menuName: menuName,
menuUrl: menuUrl,
menuOrder: menuOrder,
menuIcon: menuIcon,
type: type
};
var url = "permission/updateOrAddMenu";
uwillBeAsyncTrue.getdata(url, params, function (data) {
var code = data.code;
if (code == '0000') {
layer.msg("操作成功");
setTimeout(function test() {
initTree();
$("#rightEditId").hide();
}, 800);
} else {
layer.alert("操作失败", {icon: 2});
}
});
} layui.use(['element', 'tree', 'layer', 'form', 'upload'], function () {
var $ = layui.jquery, tree = layui.tree;
loadMenuTree(tree); $(".downpanel").on("click", ".layui-select-title", function (e) {
$(".layui-form-select").not($(this).parents(".layui-form-select")).removeClass("layui-form-selected");
$(this).parents(".downpanel").toggleClass("layui-form-selected");
layui.stope(e);
}).on("click", "dl i", function (e) {
layui.stope(e);
});
$(document).on("click", function (e) {
$(".layui-form-select").removeClass("layui-form-selected");
}); }); function loadMenuTree(tree) {
var url = "permission/menuDataLayUiTree";
var params = {};
uwillBeAsyncTrue.getdata(url, params, function (data) {
tree({
elem: "#classtree",
nodes: data,
click: function (node) {
var $select = $($(this)[0].elem).parents(".layui-form-select");
$select.removeClass("layui-form-selected").find(".layui-select-title span").html(node.name).end().find("input:hidden[name='selectID']").val(node.id);
}
});
});
} </script>
</body>
</html>
2.后端数据结构拼接(采用的数一次性查出数据 递归拼接)
@Override
public List<MenuLayuiTree> getMenuDataLayUiTree() {
//查询所有菜单
List<MenuLayuiTree> list = new ArrayList<>();
MenuLayuiTree menuNull = new MenuLayuiTree();
menuNull.setId("0");
menuNull.setPid("0");
menuNull.setName("一级菜单");
menuNull.setMenuLevel("1");
menuNull.setMenuOrder("0");
list.add(menuNull); List<MenuLayuiTree> menuLayuiTrees = permissionDao.queryMenuLayuiTree(); for (MenuLayuiTree menu : menuLayuiTrees) {
String menuLevel = menu.getMenuLevel();
if ("1".equals(menuLevel)) {
MenuLayuiTree method = method(menuLayuiTrees, menu);
list.add(method);
}
}
return list;
} public MenuLayuiTree method(List<MenuLayuiTree> menuList, MenuLayuiTree menu) {
List<MenuLayuiTree> childrens = new ArrayList<>();
String id = menu.getId();
for (MenuLayuiTree childrenMenu : menuList) {
String pid = childrenMenu.getPid();
if (pid.equals(id)) {
childrens.add(childrenMenu);
//查询子节点的下级节点
method(menuList, childrenMenu);
}
}
menu.setChildren(childrens);
return menu;
}
完美!