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' 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改动加入节点button的图片样式

 .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 则会展开次节点。

******************************************别墅图纸推荐*************************************************