前端樹形結構實現之ztree的實現

最近因項目的需要，實現樹形結構展示中國的各個省市區，數據是從數據庫中加載而來，在網上找了很多樹形結構的插件，比如easyui，dynatree，ztree等等，他們的實現方式是大同小異。最後選擇了ztree。

zTree 是一個依靠 jQuery 實現的多功能 “樹插件”。優異的性能、靈活的配置、多種功能的組合是 zTree 最大優點（官網上的描述）。

引入js和css

jquery.ztree.core-3.5.js

jquery.js

zTreeStyle.css   樹形結構的樣式

官網地址：http://www.ztree.me/v3/main.php#_zTreeInfo

個人感覺ztree最大的特點就是提供了延遲加載技術，比如對於節點比較多的話，頁面加載的過程中會出現緩慢的情況，ztree針對這一問題做了優化。

具體的實現：

頁面接受json數據分爲簡單的json數據和標準的json數據

簡單的json數據數據：

{id:1, pId:0, name: "父節點1"},{id:11, pId:1, name: "子節點1"},{id:12, pId:1, name: "子節點2"}

標準的json數據格式：

{name: "父節點1", children: [

{name: "子節點1"},

{name: "子節點2"}

]}

我們可以看到標準的json數據是典型的樹形父子關係；

這裏可以根據數據庫中表的數據存儲方式來決定採用哪種json數據格式。

頁面的實現方式：

1.設置setting

var setting = {		
		 data: {
			simpleData: {
				enable: true
			}
		} 
	};

2.節點，簡單的json數據

 var zNodes =[
 			{ id:1, pId:0, name:"父節點1 - 展開"},
 			{ id:11, pId:1, name:"父節點11 - 摺疊"},
 			{ id:111, pId:11, name:"葉子節點111"},
 			{ id:112, pId:11, name:"葉子節點112"},
 			{ id:113, pId:11, name:"葉子節點113"},
 			{ id:114, pId:11, name:"葉子節點114"},
 			{ id:12, pId:1, name:"父節點12 - 摺疊"},
 			{ id:121, pId:12, name:"葉子節點121"},
 			{ id:122, pId:12, name:"葉子節點122"},
 			{ id:123, pId:12, name:"葉子節點123"},
 			{ id:124, pId:12, name:"葉子節點124"},
 			{ id:13, pId:1, name:"父節點13 - 沒有子節點"},
 			{ id:2, pId:0, name:"父節點2 - 摺疊"},
 			{ id:21, pId:2, name:"父節點21 - 展開"},
 			{ id:211, pId:21, name:"葉子節點211"},
 			{ id:212, pId:21, name:"葉子節點212"},
 			{ id:213, pId:21, name:"葉子節點213"},
 			{ id:214, pId:21, name:"葉子節點214"},
 			{ id:22, pId:2, name:"父節點22 - 摺疊"},
 			{ id:221, pId:22, name:"葉子節點221"},
 			{ id:222, pId:22, name:"葉子節點222"},
 			{ id:223, pId:22, name:"葉子節點223"},
 			{ id:224, pId:22, name:"葉子節點224"},
 			{ id:23, pId:2, name:"父節點23 - 摺疊"},
 			{ id:231, pId:23, name:"葉子節點231"},
 			{ id:232, pId:23, name:"葉子節點232"},
 			{ id:233, pId:23, name:"葉子節點233"},
 			{ id:234, pId:23, name:"葉子節點234"},
 			{ id:3, pId:0, name:"父節點3 - 沒有子節點"}
 		]; 

 

3.進入頁面的時候加載該項

$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);			
		});

 

以上是最簡單的ztree的實現方式。

從後臺通過ajax讀取json數據:

var zNodes;
	$(document).ready(function(){
			    $.ajax({  
			        async : false,  
			        cache:false,  
			        type: 'POST',  
			        dataType : 'json',  
			        url: '<%=basePath%>ajax/treeInfo',//請求的action路徑  
			        error: function () {//請求失敗處理函數  
			            alert('請求失敗'); 
			        },  
			        success:function(data){ //請求成功後處理函數。
			           zNodes = data;   //把後臺封裝好的簡單Json格式賦給treeNodes
			        }  
			    }); 
			    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});

相比上面的獲取節點數據信息，這裏是通過ajax實現的，得到的data是json格式；

在頁面中明明一個id爲treeDemo的即可。

有的時候我們實現了tree之後需要treenode中的點擊時間，查下API後發現setting中有onclick時間，這裏我們寫一個函數，實現onclick的時候回調：

如下

function zTreeOnClick(event, treeId, treeNode) {	
	$("#echoActive").text("節點名稱："+treeNode.name+"----"+"節點的id值："+treeNode.id);
	};

在setting中實現回調，如下

callback: {  onClick: zTreeOnClick },

在點擊treenode的時候會自動將數據text填充到id爲echoActive的div中。