前端树形结构实现之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中。