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

效果图：

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

二、html代码

[html] view plain copy

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

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

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.        }