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

效果圖：

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

vcD4KPHA+tv6homh0bWy0+sLrPC9wPgo8cD48L3A+CjxwcmUgY2xhc3M9″brush:java;”>
<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 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 則會展開次節點。