具体方法实现

实现树形菜单，本文将给出两种实现方式。

针对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">&#xe654;</i>添加</button>&nbsp;','<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</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\">&#xe642;</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

基于Layui实现的树形菜单页面相关推荐

HTML实战案例素材1：制作树形菜单页面
实战案例素材1:制作树形菜单页面一.完整的页面效果图二.文本素材我的电脑文件列表我的电脑本地磁盘(C:) 我的文档我的收藏 ...
layui树形菜单右键_layui-treetable
最新版本是基于layui v2.2.3, 附件中有layui v1.0.7 2018.4.28 Updated 添加了全选checkbox 另外demo.html删掉部分代码,以免监听事件冲突 201 ...
layui树形菜单右键_layui树形菜单写的树形列表（treetable）
基于layui v2.2.5的 layui-tree写了一个treetable(树形列表) 效果 1.1 收起效果图 1.2 展开效果图 1.开发预备首先需要到layui官网https://www. ...
Layui 树形菜单使用
一:如果你的项目中用到了树形菜单,Layui 也许是一个不错的选择:Layui 官方网站链接. 二:使用简介: 1.前端界面,项目中导入Layui 框架 2.前端界面,使用树形菜单控件,由于是Java ...
来了老弟，Layui树形菜单tree
咳咳,大家都叫我万恶的小编. 关于树形菜单这方面layui也是有着一个独立的模块(Tree)的.之前貌似是把这个模块给下下去了的(至于为啥的话小编也就不知道了),在2.5版本的时候才被作者贤心给重新加 ...
layui table reload post请求_基于Layui组件封装的后台模版
HG框架简介 HG-Layui-UI框架,是基于layui最新版UI搭建的一套通用后台管理框架,借鉴了市面上各大主流框架风格,采用iframe标签页实现,保留了传统开发模式的简单实用性. 为快速开发减 ...
java实现layui分页_基于LayUI分页和LayUI laypage分页的使用示例
本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图: 一.引用js依赖主要是jquery-1.11. ...
DWZ中Tree树形菜单的treeCheck如何获取返回值解决方案
最近在对DWZ和asp.net MVC3进行整合,其中遇到了很多问题,总算一一解决了,今天就说说题目所示的问题解决方案. 想做一个基于角色的权限管理,要对每一个Action进行权限控制.就想用DWZ的 ...
基于layui的框架模版，采用模块化设计，接口分离，组件化思想
代码地址如下: http://www.demodashi.com/demo/13362.html 1. 准备工作编辑器vscode,需要安装liveServer插件在前端开启静态服务器或者使用hb ...
基于 Layui 的后台框架模板 layuimini
其他系列文章: 1.开箱即用的后台管理系统模版- ant-design-pro 2.https://blog.csdn.net/chensuifeng/article/details/10617271 ...

基于Layui实现的树形菜单页面