基于Layui实现的树形菜单页面
- 具体方法实现
- 方法一:针对Layui模板的前后端统一更新
- 1. 删除
- 2. 添加
- 3. 后端
- 方法二:基于Dtree实现的纯前端树形增删改
- 文中的组件地址
具体方法实现
实现树形菜单,本文将给出两种实现方式。
- 针对Layui前端模板EasyWeb iframe未实现的添加\修改\删除节点的功能,这里给出与后端实时同步的前端页面刷新方式实现节点的增删改。
- 基于Layui扩展的Dtree包,直接实现不依赖于后端的节点增删改,即只是前端样式更改,不会更改后端存放的.json数据。
方法一:针对Layui模板的前后端统一更新
PS:我这里使用MongoDB实现json文件的存储,当然也可以将json文件直接存储在文件系统中。文中所有数据均为json格式。
实现效果图:
数据库存储格式(data中存放表结构,name存放用户索引):
当进行增删改操作时,json文件的封装在前端完成,通过Ajax请求将封装好的Json数据作为字符串数组传到后端,后端将其存入数据库。
每次增删改操作完成后,均会由insTb.reload再次调用该接口实现后端数据后,前端显示与后端数据的实时同步。
//前端通过Layui-table直接请求数据库数据
layui.use(['layer', 'form', 'admin', 'treeTable', 'util', 'xmSelect'], function () {var $ = layui.jquery;var layer = layui.layer;var form = layui.form;var admin = layui.admin;var treeTable = layui.treeTable;var util = layui.util;var xmSelect = layui.xmSelect;var tbDataList = [];// 渲染表格var insTb = treeTable.render({elem: '#authoritiesTable',// url: '/iframe/test.json',url: '/request/getMongoJson?name=user1',toolbar: ['<p>','<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon"></i>添加</button> ','<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon"></i>删除</button>','</p>'].join(''),tree: {iconIndex: 2,idName: 'authorityId',pidName: 'parentId',isPidData: true,arrowType: 'arrow2',getIcon: 'ew-tree-icon-style2'},cols: [[// {type: 'checkbox'},{type: 'numbers'},{title: '类型', templet: function (d) {return ['<span class="layui-badge layui-badge-green">菜单</span>','<span class="layui-badge layui-badge-gray">文件</span>'][d.isMenu];}, align: 'center', width: 80},{field: 'authorityName', title: '文件名称<i class=\"layui-icon\"></i>', minWidth: 150,edit:'text'},{field: 'menuUrl', title: '菜单url'},{field: 'authority', title: '权限标识'},{field: 'orderNumber', title: '排序号', align: 'center', width: 80},{title: '创建时间', templet: '<p>{{layui.util.toDateString(d.createTime)}}</p>', align: 'center'},{title: '操作', toolbar: '#authoritiesTbBar', align: 'center', width: 190}]],done: function (data) {tbDataList = data;}});
//后端根据用户name值查询并获取MongoDB中的数据,封装为Json传回前端@ResponseBody@RequestMapping(value = "/getMongoJson", method = RequestMethod.GET)public String getMongoJson(String name){Query query = new Query(Criteria.where("name").is(name));
// query.fields().exclude("_id").include("data");List<Map> list = mongoTemplate.find(query, Map.class, "User");Gson gson = new Gson();String res = "";if (list.size() != 0)res = gson.toJson(list.get(0));System.out.println(res);
// FindIterable<Map> documents = mongoTemplate.getCollection("User").find(bson,Map.class);
// for (Map document : documents) {
// System.out.println(document);
// }return res;}
1. 删除
删除一个节点,我们需要考虑两点:一是删除一个目录节点之后,对应子菜单以及子节点的删除;二是删除后,对后续节点ID值以及其parentID的更新。本文将通过队列进行整棵树的遍历操作,实现对应增删改操作。
/* 删除 */function doDel(obj) {if(obj.data.authorityId != 1){layer.confirm('确定要删除选中数据吗?', {skin: 'layui-layer-admin',shade: .1}, function (i) {layer.close(i);var loadIndex = layer.load(2);var optiondata = $.extend(true, {}, insTb.options.data)var tree = insTb.options.data[0] //insTb.options.data中存放着整个树var delNode = obj.data.authorityId //delNode记录待删除的节点号var delParentvar delLength = 1 //记录一共删除的节点个数var mark = false// console.log(tree)let node = []let res = []node.push(tree)while (node.length != 0) { //使用一个队列实现遍历整棵树var temp = node.shift()if (node.length != 0)var temp2 = node[0]elsevar temp2 = tempif (temp.authorityId != delNode) {if (mark) {temp.authorityId -= delLengthtemp.orderNumber -= delLengthif (temp.parentId > delParent)temp.parentId -= delLength}res.push(temp)}if (temp.authorityId == delNode && !mark) { //如果当前节点是待删除根节点,判断其是否为目录,删除其所有子节点并将其标记为-2// console.log(delNode)if (temp.isMenu == 0) { //并计算出删除的总结点数delLength += (temp2.authorityId - temp.authorityId - 1); //删除的节点数就是它自己加上它的子节点(下一个同级目录与它的序号差值)temp.authorityId = -2delete temp.children} else {temp.authorityId = -2}mark = truedelParent = temp.parentId}if (temp.children != undefined) //继续向后遍历for (var i = temp.children.length - 1; i >= 0; i--) {node.unshift(temp.children[i])}}for (var i = 0; i < res.length; i++) {delete res[i].childrendelete res[i].LAY_INDEXdelete res[i].openres[i]['open'] = trueres[i] = JSON.stringify(res[i])}console.log(res)$.ajax({url: 'request/changeMongoJson',type: 'POST',async: false,traditional: true,data: {"res": res, "name": "user1"},success: function (response) {//请求成功后执行的代码// insTb.options.data = optiondata// obj.del()res = []node = []layer.close(loadIndex);layer.msg("删除成功", {icon: 1});insTb.options.data = optiondatainsTb.refresh();},error: function (status) {//失败后执行的代码// alert("fail")// layer.close(loadIndex);// layer.msg("无法删除根目录", {icon: 2});// insTb.refresh();}})});}elselayer.msg("无法删除根目录", {icon: 2});}
2. 添加
添加操作相对简单于删除,只需将新增节点添加到其父节点的下一个,并将后续节点的ID以及parentID向后移动一位(+1)。
function doAdd(obj){mData = obj.dataif(obj.data.isMenu == 0)admin.open({type: 1,area: '600px',title: '新建文件',content: $('#authoritiesEditDialog').html(),success: function (layero, dIndex) {// 回显表单数据form.val('authoritiesEditForm', mData);// 表单提交事件form.on('submit(authoritiesEditSubmit)', function (data) {data.field.parentId = insXmSel.getValue('valueStr');var newNode = new Object();newNode["authorityId"] = parseInt(data.field.authorityId) + 1newNode["orderNumber"] = parseInt(data.field.authorityId) + 1newNode["authorityName"] = data.field.authorityNamenewNode["authority"] = data.field.authoritynewNode["isMenu"] = parseInt(data.field.isMenu)newNode["menuUrl"] = data.field.menuUrlnewNode["parentId"] = parseInt(data.field.parentId)newNode["menuIcon"] = nullDate.prototype.Format = function (fmt) { // author: meizzvar o = {"M+": this.getMonth() + 1, // 月份"d+": this.getDate(), // 日"h+": this.getHours(), // 小时"m+": this.getMinutes(), // 分"s+": this.getSeconds(), // 秒"q+": Math.floor((this.getMonth() + 3) / 3), // 季度"S": this.getMilliseconds() // 毫秒};if (/(y+)/.test(fmt))fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));for (var k in o)if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));return fmt;}newNode["createTime"] = new Date().Format("yyyy-MM-dd hh:mm:ss")newNode["updateTime"] = new Date().Format("yyyy-MM-dd hh:mm:ss")newNode["open"] = true// console.log(newNode)var tree = insTb.options.data[0] //tt.options.data中存放着整个树var addNode = newNode.authorityId //delNode记录待添加的节点号// console.log(insTb)let node = []let res = []var nodeNum = 0;node.push(tree)while(node.length != 0) { //使用一个队列实现遍历整棵树// if(addNode > )nodeNum = nodeNum + 1;var temp = node.shift()// console.log(temp)var tempcopy = new Object()if(temp.authorityId == addNode) {res.push(newNode)}if(temp.authorityId >= addNode) { //待添加节点会增加到其父节点的第一个子节点(父节点编号10,则新增节点编号11)tempcopy["authorityId"] = temp.authorityId + 1 //所以所有编号在10之后的向后一位tempcopy["orderNumber"] = temp.authorityId + 1} else {tempcopy["authorityId"] = temp.authorityIdtempcopy["orderNumber"] = temp.authorityId}tempcopy["authorityName"] =temp.authorityNametempcopy["authority"] = temp.authoritytempcopy["isMenu"] = temp.isMenutempcopy["menuUrl"] = temp.menuUrlif(temp.parentId >= addNode) tempcopy["parentId"] = temp.parentId + 1 //同理,对应的父节点也向后一位else tempcopy["parentId"] = temp.parentIdtempcopy["menuIcon"] = nulltempcopy["createTime"] = temp.createTimetempcopy["updateTime"] = temp.updateTimetempcopy["open"] = trueres.push(tempcopy)// console.log(temp)if(temp.children != undefined) //继续向后遍历for(var i = temp.children.length - 1; i >= 0; i--){node.unshift(temp.children[i])}}if(nodeNum < addNode)res.push(newNode)// console.log(tree)// console.log(res)for(var i = 0; i < res.length;i ++){res[i] = JSON.stringify(res[i])}console.log(res)var loadIndex = layer.load(2);$.ajax({url:'request/changeMongoJson',type:'POST',async: false,traditional: true,data:{"res": res, "name": "user1"},success:function(response){res = []node = []layer.close(dIndex);layer.close(loadIndex)layer.msg("添加成功", {icon: 1});insTb.refresh();},error:function(status){//失败后执行的代码// alert("fail")}})return false;});// 渲染下拉树var insXmSel = xmSelect.render({el: '#authoritiesEditParentSel',height: '0px',data: insTb.options.data,initValue: mData ? [mData.authorityId] : [],model: {label: {type: 'text'}},prop: {name: 'authorityName',value: 'authorityId'},radio: true,clickClose: true,tree: {show: true,indent: 15,strict: false,expandedKeys: true}});// 弹窗不出现滚动条$(layero).children('.layui-layer-content').css('overflow', 'visible');}});elselayer.msg("这不是一个菜单", {icon: 2});}
3. 后端
后端只需接收相应的字符串数组,将其封装为标准的Json格式并写入MongoDB数据库中。
@RequestMapping(path = "/changeMongoJson", method = RequestMethod.POST)@ResponseBodypublic String changeMongoJson(String[] res, String name){for (String s:res) {System.out.println(s);}int len = res.length;StringBuilder sb = new StringBuilder();sb.append("{\n" +" \"code\": 0,\n" +" \"msg\": \"\",\n" +" \"count\": "+ len +",\n" +" \"name\": \""+ name +"\",\n" +" \"data\": [");for(String temp : res){sb.append(temp + ",");}sb.deleteCharAt(sb.length() - 1);sb.append(" ]\n" +"}");Query query = new Query(Criteria.where("name").is("user1"));
// query.fields().exclude("_id").include("data");
// Update update = new Update();
// update.set("count", res.length);
// update.push("data", res);mongoTemplate.remove(query, Map.class, "User");
// System.out.println(1);
// System.out.println(sb);mongoTemplate.insert(sb.toString(), "User");
// System.out.println(sb);
// Gson gson = new Gson();
// TreeNode temp = gson.fromJson(res, TreeNode.class);return "iframe/index.html";}
方法二:基于Dtree实现的纯前端树形增删改
这个方法对后端访问频率低,在增删改时直接进行前端树样式的变换,即不是依靠先存入后端,再从后端读数据的模式,减少了数据库访问量。
实现效果图:
Dtree组件已经给出了前端修改的具体方法,只需调用对应方法,即可以实现树结构变更:
- 改–DTree1.changeTreeNodeEdit(true);
- 增–DTree1.changeTreeNodeAdd(treeNode.nodeId);
- 删–DTree1.changeTreeNodeDel(true);
<script type="text/javascript">layui.extend({dtree: '../assets/module/dtree/dtree'}).use(['element','layer', 'table', 'code' ,'util', 'dtree', 'form'], function(){var element = layui.element, layer = layui.layer, table = layui.table, util = layui.util, dtree = layui.dtree, form = layui.form, $ = layui.$;var olddata;// $.ajax({// async: false,// url: 'iframe/test2.json',// success: function(res){// olddata = res;// console.log(olddata)// }// })var DTree1 = dtree.render({async: false,elem: "#demoTree",method: "GET",url: 'iframe/test2.json',// data: data,toolbar:true,scroll:"#toolbarDiv",dataFormat: "list", //配置data的风格为listtoolbarFun: {addTreeNode: function(treeNode, $div){console.log(treeNode)var id = treeNode.nodeId.replaceAll("_node_", "00")var title = treeNode.contextvar parentId = treeNode.parentId.replaceAll("_node_", "00")$.ajax({type: "post",traditional: true,data: {"status": "add", "filename": "test2","id": id, "title": title, "parentId": parentId},url: "request/changenewJson",success: function(result){DTree1.changeTreeNodeAdd(treeNode.nodeId); // 添加成功,返回ID// DTree1.changeTreeNodeAdd(true); // 添加成功// DTree1.changeTreeNodeAdd(result); // 添加成功,返回一个JSON对象// DTree1.changeTreeNodeAdd("refresh"); // 添加成功,局部刷新树},error: function(){DTree1.changeTreeNodeAdd(false); // 添加成功,返回ID}});},editTreeNode: function(treeNode, $div){console.log(treeNode)if (treeNode.nodeId === "000") {layer.msg("根目录无法修改" , {icon: 2})DTree1.changeTreeNodeEdit(false);//修改失败return}var id = treeNode.nodeId.replaceAll("_node_", "00")var title = treeNode.contextvar parentId = treeNode.parentId.replaceAll("_node_", "00")$.ajax({type: "post",traditional: true,data: {"status": "edit", "filename": "test2","id": id, "title": title, "parentId": parentId},url: "request/changenewJson",success: function(result){DTree1.changeTreeNodeEdit(true);// 修改成功//DTree1.changeTreeNodeEdit(result.param); // 修改成功,返回一个JSON对象},error: function(){DTree1.changeTreeNodeEdit(false);//修改失败}});},delTreeNode: function(treeNode, $div){console.log(treeNode)if (treeNode.nodeId === "000") {layer.msg("根目录无法删除" , {icon: 2})DTree1.changeTreeNodeDel(false);// 删除失败1return}var id = treeNode.nodeId.replaceAll("_node_", "00")var title = treeNode.contextvar parentId = treeNode.parentId.replaceAll("_node_", "00")$.ajax({type: "post",traditional: true,data: {"status": "del", "filename": "test2","id": id, "title": title, "parentId": parentId},url: "request/changenewJson",success: function(result){DTree1.changeTreeNodeDel(true); // 删除成功},error: function(){DTree1.changeTreeNodeDel(false);// 删除失败}});}}});dtree.on("node(demoTree)", function(obj){layer.msg(JSON.stringify(obj.param));})});
</script>
文中的组件地址
本文给出两种树形表格的实现方式,前者是基于EasyWeb-iframe框架实现;后者是基于Dtree组件实现。
EasyWeb-iframe下载地址:easyweb
Dtree组件下载地址:Dtree