使用zTree.js動態載入樹節點小結
阿新 • • 發佈:2018-12-01
樹外掛一般用與多級分類,許可權管理選單,這個Ztree功能還是基本滿足我們的需求
直接上程式碼
@{ ViewBag.Title = "zTree"; } <h2> @ViewBag.Title</h2> <link href="~/zTree_v3-master/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <div class="row"> <ul id="treeDemo" class="ztree col-lg-5"></ul> <ul id="ulright" class="col-lg-7"> <li style="text-align: center;background-color: #ddd;border-bottom: 1px dashed">已選擇</li> </ul> </div> @section scripts{ <script src="~/zTree_v3-master/js/jquery.ztree.all.min.js"></script> <script> //遞迴找到所有節點(非父節點) function getAllChildrenNodes(treeNode, result) { if (treeNode.isParent) { var childrenNodes = treeNode.children; if (childrenNodes) { for (var i = 0; i < childrenNodes.length; i++) { if (!childrenNodes[i].children) { result.push(childrenNodes[i].name); } result = getAllChildrenNodes(childrenNodes[i], result); } } } return result; } var parames = 3; //zTree的所有配置 var setting = { //zTree 的唯一標識,初始化後,等於 使用者定義的 zTree 容器的 id 屬性值。 treeId: "", //zTree 容器的 jQuery 物件,主要功能:便於操作,內部引數,不可修改 treeObj: null, //非同步請求資料配置;點選此父節點會觸發請求 async: { //開啟此功能 enable: true, url: "/ZTree/Data", type: "post", //傳送的父級id的欄位定義;如修改,遵循格式autoParam: ["id=parentId"] autoParam: ["id"], //其他需要提交的引數["name","topic","key","ss"]轉換後格式為name=topic&key=ss //otherParam: ["json", parames || 1, "test", "2"], dataType: "json", contentType: "application/x-www-form-urlencoded", //ajax請求後的資料預處理函式 dataFilter: function (treeId, parentNode, responseData) { console.log(responseData) return responseData; } }, //資料配置 data: { simpleData: { enable: true, idKey: "id", //修改預設的ID為自己的id pIdKey: "pid", //修改預設父級ID為自己資料的父級id rootPId: 0 //根節點的父節點id } }, //檢視配置 view: { //是否顯示節點前的圖示 showIcon: showIconForTree, //節點上a標籤的樣式 fontCss: { } }, //選框配置 check: { //啟用複選框 enable: true, //chkStyle:"radio",//單選 //複選框父子級選擇聯動設定 chkboxType: { "Y": "ps", "N": "ps" } }, //事件配置 callback: { //點選複選框之前的事件 beforeCheck: function (treeId, treeNode) {//如果節點是父節點,並且勾選時沒有子節點,則不允許勾選;針對父節點沒有展開,則沒有非同步載入子節點,此情況禁止點選父節點全選子節點的操作 if (treeNode.isParent && !treeNode.children) { return false; } }, //回撥錯誤事件 onAsyncError: function (event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) { alert("初始化節點資料失敗,請稍後重試"); }, //回撥成功事件 onAsyncSuccess: function (event, treeId, treeNode, resData) { var zTree = $.fn.zTree.getZTreeObj("treeDemo"); console.log("資料載入成功"); var count = (treeNode.children.length); //載入成功後;在節點後面顯示此父節點下有幾個一級子節點 //$(".ztree").find("a[title=" + treeNode.name + "]").find("span[class='node_name']").html(treeNode.name + "<span>(" + count + ")</span>"); }, //父節點展開時的事件 onExpand: function (event, treeId, treeNode) { //zTree物件 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //獲取點選的id var nowId = treeNode.id; //獲取所有節點 var allNodes = zTree.getNodes(); //獲取點選節點的層級 var level = treeNode.level; //定義過濾函式;獲取節點層級與點選節點層級相同並且為父節點的節點 function filter(node) { return (node.level == treeNode.level && node.isParent); } //獲得點選節點同級的父節點的集合 var sameLevelNodes = zTree.getNodesByFilter(filter); //遍歷同級節點集合 for (var i = 0; i < sameLevelNodes.length; i++) { //將非被點選父節點收起;實現手風琴效果 if (sameLevelNodes[i].id != nowId) { zTree.expandNode(sameLevelNodes[i], false, true, true); } } }, //點選事件 onClick: function (e, treeId, treeNode, clickFlag) { //tree例項 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //點選文字關聯複選框 //如果不是父節點,則關聯,或者是父節點,但展開狀態位true是,也關聯; if (!treeNode.isParent || (treeNode.isParent && treeNode.open)) { zTree.checkNode(treeNode, !treeNode.checked, true);//點選文字關聯複選框 } //點選文字展開當前節點 zTree.expandNode(treeNode, true, true, true); // zTree.reAsyncChildNodes(treeNode, "refresh");//強行非同步載入(存在子節點也進行載入) //手風琴效果;直接呼叫onExpand zTree.setting.callback.onExpand(e, treeId, treeNode); //點選節點名稱和勾選節點前面的複選框邏輯相同; //直接在onClick裡面呼叫onCheck函式;並傳入所需引數 zTree.setting.callback.onCheck(e, treeId, treeNode); }, //點選複選框事件 onCheck: function (e, treeId, treeNode) { //獲取右側ul內所有li標籤;用於比較當前選擇複選框在右側是否一斤存在 var rightLi = $("#ulright").find("li"); //選中的是底層節點; if (!treeNode.isParent) { //選中狀態,加入到右側 if (treeNode.checked) { //遍歷右側li,如果選中的已經存在;return for (var i = 0; i < rightLi.length; i++) { if ($(rightLi[i]).attr("title") == treeNode.name) { return; } } // 建立li 追加li var addLi = $("<li title=" + treeNode.name + "><span></span>"); addLi.find("span").text(treeNode.name); addLi.animate({ width: "100%", height: "30" }, 400) addLi.appendTo($("#ulright")); //如果點選的節點存在connect欄位;判斷複選框狀態加入到右側ul或刪除 if (treeNode.connect) { //遍歷右側li,如果選中的已經存在;return for (var i = 0; i < rightLi.length; i++) { if ($(rightLi[i]).attr("title") == treeNode.connect) { return; } } // 建立li 追加li var addLi = $("<li title=" + treeNode.connect + "><span></span>"); addLi.find("span").text(treeNode.connect); addLi.animate({ width: "100%", height: "30" }, 400) addLi.appendTo($("#ulright")); } //將被勾選的節點背景顏色更改 $("#treeDemo").find("a[title=" + treeNode.name + "]").css("backgroundColor", "#00b6ba"); //非選中狀態,刪除 } else { //將右側的次節點對應的li刪除 $("#ulright").find("li[title=" + treeNode.name + "]").animate({ width: "0%", height: "0" }, 400, function () { $("#ulright").find("li[title=" + treeNode.name + "]").remove(); }) //取消此節點的背景顏色 $("#treeDemo").find("a[title=" + treeNode.name + "]").css("backgroundColor", ""); } //選中的是父節點;獲取所有子節點(非父節點),判斷複選框狀態加入到右側ul或刪除 } else { //呼叫遞迴函式;獲取所有非父級子節點陣列集合 var addNodesArray = getAllChildrenNodes(treeNode, []); //是選中狀態,加入到右側ul if (treeNode.checked) { //定義儲存右側li的陣列 var rightLiArray = []; $("#ulright li").each(function (i, v) { rightLiArray.push($(v).attr("title")) }) rightLiArray = rightLiArray.slice(1); //遍歷勾選的陣列集合 for (var i = 0; i < addNodesArray.length; i++) { //判斷此節點是否在右側ul內;不存在則加入 if (rightLiArray.indexOf(addNodesArray[i]) == -1) { //建立li 追加li var addLi = $("<li title=" + addNodesArray[i] + "><span>" + addNodesArray[i] + "</span>"); addLi.animate({ width: "100%", height: 30 }, 400) addLi.appendTo($("#ulright")); } //將節點背景顏色修改 $("#treeDemo").find("a[title=" + addNodesArray[i] + "]").css("backgroundColor", "#00b6ba"); } //是非選中狀態,刪除 } else { //遍歷節點,執行刪除操作 for (var i = 0; i < addNodesArray.length; i++) { $("#ulright").find("li[title=" + addNodesArray[i] + "]").animate({ width: "0%", height: 0 }, function () { $(this).css("display", "none"); $(this).remove(); }) //還原背景顏色 $("#treeDemo").find("a[title=" + addNodesArray[i] + "]").css("backgroundColor", ""); } } } }, } }; //zTree的節點資訊;可一次性全部載入;可試試非同步請求 var zNodes = [ { name: "一班",//名稱 id: 1,//id,子元素的pid isParent: true,//是否為父節點,預設為false pid: 0,//父節點id;data中的rootPId; icon: "../zTree_v3-master/css/zTreeStyle/img/diy/1_open.png",//設定圖示 open: true,//設定預設是否展開//非同步載入子節點無效 //checked:true //設定預設勾選 }, { name: "二班", id: 2, isParent: true, pid: 0 }, { name: "三班", id: 3, isParent: true, pid: 0 }]; ///設定 zTree 僅僅 level=1 的節點不顯示圖示 function showIconForTree(treeId, treeNode) { return treeNode.level !=1; }; $(document).ready(function () { //初始化zTree; zTree容器的jquery物件/ 配置/ 節點 //$.fn.zTree.init($("#treeDemo"), setting, null);///如果需要根節點也非同步載入,初始化時 zNodes 引數設定為 null 即可。 $.fn.zTree.init($("#treeDemo"), setting,zNodes) }); </script>}
doml效果圖
Ztree.js下載地址:https://github.com/zTree/zTree_v3