zTree树形展示，可新增修改删除节点

男娘i 2022-06-05 10:26 220阅读 0赞

效果图：

![Center][]

一、下载zTree插件 地址：[http://www.ztree.me][http_www.ztree.me]

二、html代码

\[html\]  [view plain][]  [copy][view plain]

1.  **<****link** href="../Scripts/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" **/>**  
2.      **<****script** src="../Scripts/zTree/js/jquery-1.4.4.min.js"**>****</****script****>**  
3.      **<****script** src="../Scripts/zTree/js/jquery.ztree.core-3.5.js"**>****</****script****>**  
4.      **<****script** src="../Scripts/zTree/js/jquery.ztree.excheck-3.5.js"**>****</****script****>**  
5.      **<****script** src="../Scripts/zTree/js/jquery.ztree.exedit-3.5.js"**>****</****script****>**  
6.      **<****script** type="text/javascript"**>**  
7.          var setting = \{  
8.              async: \{  
9.                  enable: true,  
10.                 url: "../AjaxPage/GetAjax.aspx?z=sdfww234edfsd",  
11.                 autoParam: \["ID"\],  
12.                 contentType: "application/json",  
13.                 type: "get",  
14.                 dataFilter: filter  
15.             \},  
16.             view: \{  
17.                 expandSpeed: "",  
18.                 addHoverDom: addHoverDom,  
19.                 removeHoverDom: removeHoverDom,  
20.                 selectedMulti: false  
21.             \},  
22.             check: \{  
23.                 enable: true  
24.             \},  
25.             edit: \{  
26.                 enable: true  
27.             \},  
28.             data: \{  
29.                 simpleData: \{  
30.                     enable: true  
31.                 \}  
32.             \},  
33.             callback: \{  
34.                 beforeRemove: beforeRemove,  
35.                 beforeRename: beforeRename,  
36.             \}  
37.         \};  
38.         function filter(treeId, parentNode, childNodes) \{  
39.             if (!childNodes) return null;  
40.             for (var i = 0, l = childNodes.length; i **<** l; i++) \{  
41.                 childNodes\[i\].name = childNodes\[i\].name.replace(/\\.n/g, '.');  
42.             \}  
43.             return childNodes;  
44.         \}  
45.         function beforeRemove(treeId, treeNode) \{  
46.             var zTree = $.fn.zTree.getZTreeObj("treeDemo");  
47.             zTree.selectNode(treeNode);  
48.             alert(treeNode.Action);//哈哈 出来了   
49.             return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");  
50.         \}  
51.         function beforeRename(treeId, treeNode, newName) \{  
52.             if (newName.length == 0) \{  
53.                 alert("节点名称不能为空!");  
54.                 return false;  
55.             \}  
56.             return true;  
57.         \}  
58.   
59.         var newCount = 1;  
60.         function addHoverDom(treeId, treeNode) \{  
61.             var sObj = $("\#" + treeNode.tId + "\_span");  
62.             if (treeNode.editNameFlag || $("\#addBtn\_" + treeNode.tId).length **>** 0) return;  
63.             var addStr = "<span class='button add' id='addBtn\_" + treeNode.tId  
64.                 + "' title='add node' onfocus='this.blur();' **>****</****span****>**";  
65.             sObj.after(addStr);  
66.             var btn = $("\#addBtn\_" + treeNode.tId);  
67.             if (btn) btn.bind("click", function () \{  
68.                 var zTree = $.fn.zTree.getZTreeObj("treeDemo");  
69.                 zTree.addNodes(treeNode, \{ id: (treeNode.id + newCount), parentid: treeNode.id, name: "new node" + (newCount++) \});  
70.                 return false;  
71.             \});  
72.         \};  
73.         function removeHoverDom(treeId, treeNode) \{  
74.             $("\#addBtn\_" + treeNode.tId).unbind().remove();  
75.         \};  
76.         $(document).ready(function () \{  
77.             $.fn.zTree.init($("\#treeDemo"), setting);  
78.         \});  
79.     **</****script****>**  
80. **<****div** class="row"**>**  
81.         **<****div** class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12"**>**  
82.             **<****div** class="panel panel-default"**>**  
83.                 **<****div** class="panel-heading"**>**  
84.                     **<****h2****>**权限菜单管理**</****h2****>**  
85.                     **<****div** class="panel-actions"**>**  
86.                         **<****a** href="MenuManagement.aspx\#" class="btn-minimize"**>****<****i** class="fa fa-chevron-up"**>****</****i****>****</****a****>**  
87.                         **<****a** href="MenuManagement.aspx\#" class="btn-close"**>****<****i** class="fa fa-times"**>****</****i****>****</****a****>**  
88.                     **</****div****>**  
89.                 **</****div****>**  
90.                 **<****div** class="panel-body"**>**  
91.                     **<****div** class="row"**>**  
92.                         **<****div** class="col-md-12"**>**  
93.                             **<****ul** id="treeDemo" class="ztree"**>****</****ul****>**  
94.                         **</****div****>**  
95.                     **</****div****>**  
96.                 **</****div****>**  
97.             **</****div****>**  
98.         **</****div****>**  
99.     **</****div****>**

三、zTreeStyle.css修改添加节点按钮的图片样式

\[css\]  [view plain][]  [copy][view plain]

1.  .ztree li span.button.add \{  
2.                 **margin-left**: 2px;  
3.                 **margin-right**: \-1px;  
4.                 **background-position**: \-144px 0;  
5.                 **vertical-align**: top;  
6.             \}

四、后台代码：

\[csharp\]  [view plain][]  [copy][view plain]

1.  **protected** **void** Page\_Load(**object** sender, EventArgs e)  
2.         \{  
3.             **if** (Request.QueryString\["z"\] == "sdfww234edfsd")  
4.             \{  
5.  StringBuilder sb = **new** StringBuilder();  
6.                 sb.Append("\[");  
7.                 sb.Append("\{\\"id\\":\\"1\\",\\"name\\":\\"销售单管理\\",\\"pId\\":\\"0\\",\\"Action\\":\\"list\\"\},");  
8.                 sb.Append("\{\\"id\\":\\"2\\",\\"name\\":\\"销售单列表\\",\\"pId\\":\\"1\\",\\"Action\\":\\"list\\"\},");  
9.                 sb.Append("\]");  
10.                Response.Write(sb.ToString());  \}  
11.        \}

[Center]: /images/20220605/238c6fc59e70416fa67582e6d16b8a16.png
[http_www.ztree.me]: http://www.ztree.me/
[view plain]: http://blog.csdn.net/chinaplan/article/details/40587575#