bootstrap jQuery Ztree異步加載數據，check選擇&可添加、修改、刪除節點

效果圖：

一、下載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 = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' οnfοcus='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());  }
        }

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

******************************************別墅圖紙推薦*************************************************