當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

tree树的展示，check树的展示，json数据转zree树格式数据

發布時間：2025/6/17 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 tree树的展示，check树的展示，json数据转zree树格式数据小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

tree樹展示：

<!DOCTYPE html> <HTML><HEAD><TITLE> ZTREE DEMO </TITLE><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" href="demoStyle/demo.css" type="text/css"><link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css"><script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript" src="jquery.ztree.core-3.x.js"></script><SCRIPT LANGUAGE="JavaScript">var zTreeObj;// zTree 的參數配置，深入使用請參考 API 文檔（setting 配置詳解）var setting = {};// zTree 的數據屬性，深入使用請參考 API 文檔（zTreeNode 節點數據詳解）var zNodes = [{name:"test1", open:true, children:[{name:"test1_1"}, {name:"test1_2"}]},{name:"test2", open:true, children:[{name:"test2_1"}, {name:"test2_2"}]}];$(document).ready(function(){zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);});</SCRIPT></HEAD> <BODY> <div><ul id="treeDemo" class="ztree"></ul> </div> </BODY> </HTML>

?check樹的展示：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>tree excheck</title><link rel="stylesheet" href="zTreeStyle/zTreeStyle.css"> <script src="publick/jquery-3.3.1.js"></script><script src="publick/jquery.ztree.core.min.js"></script><script src="publick/jquery.ztree.excheck.min.js"></script> </head> <body> <ul id="leftTree" class="ztree"></ul> <a id="checkAllTrue" href="#" >勾選</a> <a id="checkAllFalse" href="#">取消勾選</a> <script>var setting = {check:{enable:true},view: {showLine: true,//顯示節點之間的連線。selectedMulti: false //允許同時選中多個節點。 },data: {simpleData: {enable:true, //使用簡單數據模式idKey: "id",//節點數據中保存唯一標識的屬性名稱pIdKey: "pId",//節點數據中保存其父節點唯一標識的屬性名稱rootPId: "" //用于修正根節點父節點數據默認值：null }} };var nodes = [{id :"1",pId:"0",name :"山西省"},{id :"2",pId:"0",name : "河北省"},{id :"3",pId:"0",name : "內蒙省"},{id :"4",pId:"0",name : "吉林省"},{id :"11",pId:"1",name: "大同市"},{id :"12",pId:"1",name: "朔州市"},{id :"21",pId:"2",name: "石家莊"},{id :"22",pId:"2",name: "唐山市"},{id :"31",pId:"3",name: "赤峰市"},{id :"32",pId:"3",name: "呼市"},{id :"41",pId:"4",name: "長春市"},{id :"42",pId:"4",name: "四平市"},{id :"43",pId:"4",name: "遼源市"},{id :"111",pId:"11",name:"渾源縣"},{id :"112",pId:"11",name: "陽高縣"},{id :"121",pId:"12",name: "山陰縣"},{id :"122",pId:"12",name: "應縣"}];var tree = $.fn.zTree.init($('#leftTree'), setting, nodes);tree.expandAll(tree);function checkNode(e) {var zTree = $.fn.zTree.getZTreeObj("leftTree"),type = e.data.type,nodes = zTree.getSelectedNodes();console.log(type.indexOf("All"));if (type.indexOf("All") < 0 && nodes.length == 0) {alert("請先選擇一個節點");}if (type == "checkAllTrue") {zTree.checkAllNodes(true);} else if (type == "checkAllFalse") {zTree.checkAllNodes(false);}}$("#checkAllTrue").bind("click", { type: "checkAllTrue" }, checkNode);$("#checkAllFalse").bind("click", { type: "checkAllFalse" }, checkNode);var zTreeObj = $.fn.zTree.getZTreeObj("leftTree"); //那個樹對象 console.log(zTreeObj);var nodes = zTreeObj.transformToArray(zTreeObj.getNodes());console.log(nodes);</script> </body> </html>

如下圖從后端得到的json數據格式，轉ztree樹的格式：

//***********************加載樹形菜單***************/ function zteeLoad(){var zTreeObj;// zTree 的參數配置，深入使用請參考 API 文檔（setting 配置詳解）var setting = {async:{enable:true,autoParam:["id"],dataType:"json",},view: {selectedMulti: false },callback: {onClick: zTreeOnClick //ztree的點擊事件 } };$.ajax({url:path+"/sysAclModule/selectByPisoTree.do",type:"post",data:{},dataType:"json",success: function(result) {var jsonData=result.data;for(var i = 0; i < jsonData.length; i++) {jsonData[i]["id"] = jsonData[i]["treeid"]; //'treeid'換成tree的固定數據名id 還有pid 注這里只有id數據名于tree不一致 };var jsonDataTree =transDate(jsonData,'id','pid');////json數據轉換tree數據zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, jsonDataTree);}}); } //json數據轉換tree數據 function transDate(list,idstr,pidstr){ var result = [],temp = {}; for(i = 0; i < list.length; i++){ temp[list[i][idstr]]=list[i];//將nodes數組轉成對象類型 } for(j=0; j<list.length; j++){ tempVp = temp[list[j][pidstr]]; //獲取每一個子對象的父對象 if(tempVp){//判斷父對象是否存在，如果不存在直接將對象放到第一層 if(!tempVp["children"]) tempVp["children"] = [];//如果父元素的nodes對象不存在，則創建數組 tempVp["children"].push(list[j]);//將本對象壓入父對象的nodes數組 }else{ result.push(list[j]);//將不存在父對象的對象直接放入一級目錄 } } return result; } ///tree點擊事件 function zTreeOnClick(event, treeId, treeNode) {alert(treeNode.tId + ", " + treeNode.id); };

默認展示全部項

zTreeObj.expandAll(true);//默認展開全部

展示第一項下的子級

var node = zTreeObj.getNodeByTId("areaTree2_1"); //選中第一個節點 zTreeObj.expandNode(node, true, false, true);

轉載于:https://www.cnblogs.com/fanting/p/10153732.html

總結

以上是生活随笔為你收集整理的tree树的展示，check树的展示，json数据转zree树格式数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CSS3 flexbox 布局 ----
下一篇： Google advertiser ap