bootstrap jQuery Ztree非同步載入資料，check選擇&可添加、修改、刪除節點

bootstrap jQuery Ztree非同步載入資料，check選擇&可添加、修改、刪除節點

：

一、下載zTree外掛程式 地址：http://www.ztree.me

二、html代碼

    <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 = "";            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>                                                        許可權菜單管理                                                                                                                                                                                                
 
                                                                                    

三、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());  }        }

說明：據我測試看來，id、name、pId為三個必需的欄位,pId可看做parentID，open=true 則會展開次節點。