Ztree树形菜单实现动态初始化、添加、删除、修改节点

最新推荐文章于 2020-07-02 13:07:49 发布

蒙蒙哦哦

最新推荐文章于 2020-07-02 13:07:49 发布

阅读量4.1k

点赞数

分类专栏： js C# 文章标签： ZTree Ajax

本文链接：https://blog.csdn.net/xumengmeng_xu/article/details/70186021

版权

本文介绍了如何使用ZTree实现动态初始化树形菜单，并展示了添加、删除和修改节点的示例代码。通过控制函数`showRemoveBtn`和`showRenameBtn`来设定根节点的操作权限。在编辑页面，节点修改通过后台代码完成，添加的子节点可进行编辑和删除操作。此外，还提及了`FlowTypeHandler.ashx`代码用于处理获取、添加和删除功能。

摘要由CSDN通过智能技术生成

首先使用ZTree可以到网站上下载相关的例子和js：http://www.treejs.cn/v3/main.php#_zTreeInfo

参考例子：

可以看看基础的例子，网站上有开发接口不懂的可以查看

实现效果：

首先添加了一个根节点，根节点不可删除、编辑，树形菜单至少要有一个节点

是否可以编辑和删除的代码控制

function showRemoveBtn(treeId, treeNode) {
if (treeNode.level == 0) return false;//根节点不可删除
else return true;//!treeNode.isFirstNode;
}
function showRenameBtn(treeId, treeNode) {
if (treeNode.level == 0) return false;//根节点不可编辑
else return true;//!!treeNode.isLastNode;
}

线面添加的节点都是可以编辑和删除的，也可以添加下一级菜单

编辑页面效果：编辑页面弹出新的页面，此页面对节点进行修改（完全都是后台代码，就不多说了），添加更多的信息，关闭弹出页面会为节点重新命名为新名称。

树形菜单代码：

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="FlowTypeList.aspx.cs" Inherits="FlowOA_FlowSet_FlowTypeList" %>


    
    
    
     
     
    
     href="../../layui/css/global.css" rel="stylesheet" />
     href="../../layui/ztreecss/demo.css" rel="stylesheet" type="text/css" />
    <script src="../../layui/plugins/layui/layui.js"></script>

     href="../../layui/ztreecss/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script type="text/javascript" src="../../layui/ztreejs/jquery-1.4.4.min.js"></script>
    <script type="text/javascri