bootstrap css ztree專題及常見問題 - CSDN

效果圖：

一、下載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> <div> <div> <div> <h2>權限菜單管理</h2> <div> <a href="MenuManagement.aspx#"><i></i></a> <a href="MenuManagement.aspx#"><i></i></a> </div> </div> <div> <div> <div> <ul id="treeDemo"></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 則會展開次節點。

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

我想有一棟別墅，面朝大海，春暖花開

這裡有最給力的別墅圖紙折扣活動，圖紙包含建築圖、結構圖、給排水圖、電氣圖

我們致力於為廣大客戶提供別墅設計圖紙,圖紙均由專業、經驗豐富的設計團隊設計，可免費提供施工技術指導