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

效果图：

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

二、html代码

 <link href="../Scripts/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
     <script src="../Scripts/zTree/js/jquery-1.4.4.min.js">script>
     <script src="../Scripts/zTree/js/jquery.ztree.core-3.5.js">script>
     <script src="../Scripts/zTree/js/jquery.ztree.excheck-3.5.js">script>
     <script src="../Scripts/zTree/js/jquery.ztree.exedit-3.5.js">script>
     <script type="text/javascript">
         var setting = {
             async: {
                 enable: true,
                 url: "../AjaxPage/GetAjax.aspx?z=sdfww234edfsd",
                 autoParam: ["ID"],
                 contentType: "application/json",
                 type: "get",
                 dataFilter: filter
             },
             view: {
                 expandSpeed: "",
                 addHoverDom: addHoverDom,
                 removeHoverDom: removeHoverDom,
                 selectedMulti: false
             },
             check: {
                 enable: true
             },
             edit: {
                 enable: true
             },
             data: {
                 simpleData: {
                     enable: true
                 }
             },
             callback: {
                 beforeRemove: beforeRemove,
                 beforeRename: beforeRename,
             }
         };
         function filter(treeId, parentNode, childNodes) {
             if (!childNodes) return null;
             for (var i = 0, l = childNodes.length; i < l; i++) {
                 childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
             }
             return childNodes;
         }
         function beforeRemove(treeId, treeNode) {
             var zTree = $.fn.zTree.getZTreeObj("treeDemo");
             zTree.selectNode(treeNode);
             alert(treeNode.Action);//哈哈 出来了
             return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
         }
         function beforeRename(treeId, treeNode, newName) {
             if (newName.length == 0) {
                 alert("节点名称不能为空!");
                 return false;
             }
             return true;
         }

         var newCount = 1;
         function addHoverDom(treeId, treeNode) {
             var sObj = $("#" + treeNode.tId + "_span");
             if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
             var addStr = " + treeNode.tId
                 + "' title='add node' onfocus='this.blur();' >span>";
             sObj.after(addStr);
             var btn = $("#addBtn_" + treeNode.tId);
             if (btn) btn.bind("click", function () {
                 var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                 zTree.addNodes(treeNode, { id: (treeNode.id + newCount), parentid: treeNode.id, name: "new node" + (newCount++) });
                 return false;
             });
         };
         function removeHoverDom(treeId, treeNode) {
             $("#addBtn_" + treeNode.tId).unbind().remove();
         };
         $(document).ready(function () {
             $.fn.zTree.init($("#treeDemo"), setting);
         });
     script>
 <div class="row">
         <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12">
             <div class="panel panel-default">
                 <div class="panel-heading">
                     <h2>权限菜单管理h2>
                     <div class="panel-actions">
                         <a href="MenuManagement.aspx#" class="btn-minimize"><i class="fa fa-chevron-up">i>a>
                         <a href="MenuManagement.aspx#" class="btn-close"><i class="fa fa-times">i>a>
                     div>
                 div>
                 <div class="panel-body">
                     <div class="row">
                         <div class="col-md-12">
                             <ul id="treeDemo" class="ztree">ul>
                         div>
                     div>
                 div>
             div>
         div>
     div>

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

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

四、后台代码：

 protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.QueryString["z"] == "sdfww234edfsd")
            {
 StringBuilder sb = new StringBuilder();
                sb.Append("[");
                sb.Append("{\"id\":\"1\",\"name\":\"销售单管理\",\"pId\":\"0\",\"Action\":\"list\"},");
                sb.Append("{\"id\":\"2\",\"name\":\"销售单列表\",\"pId\":\"1\",\"Action\":\"list\"},");
                sb.Append("]");
                Response.Write(sb.ToString());  }
        }