zTree初体验（二）——再续前缘

上篇文章简介了下zTree，以及简单实现。本篇书接上文，进行一下扩展，来看一下怎么从后台获取简单格式Json数据。

1）. 我们就以项目中的部门组织结构为例，先从Manager层的方法开始。为了便于转Json，采用的是map形式的hql语句，这样出来的数据，是标准的key-value形式。

/**
 * map的形式加载所有的部门
 * @return	List<DepTree>
 * 			部门的List集合
 * @author	张连海
 * @since	2015.07.10
 */
@SuppressWarnings("unchecked")
public List<DepTree> getDepTree() {
	String hql = "select new map(id as id,departName as departName,parentId as parentId) from Department";
	List<DepTree> list = dao.find(hql);	// 调用底层封装的find()方法，执行查询
	return list;
}

2）. 接下来，就是action中的方法，主要是把获取到的List<DepTree>转成Json字符串，并传给前台页面。

/**
 * 加载全部部门
 *
 * @return	null
 * @throws 	Exception
 * @author	张连海
 * @since	2015.07.10
 */
public String listByAjax() throws Exception {
	List<DepTree> listTree = departmentManager.getDepTree();// 调用Manager的方法，获取List<DepTree>数据
	JSONArray json = JSONArray.fromObject(listTree);		// 把List<DepTree>转为JSONArray对象
	renderText(json.toString());							// 转成Json字符串，并传给前台
	return null;
}

3）. 最后，就是页面jsp中的数据显示了。

<script type="text/javascript">
	$(function() {
		var setting = {
			data : {
				simpleData : {
					enable : true,
					idKey : "id",		// 结点的id,对应到Json中的id
					pIdKey : "parentId",// 结点的pId,对应到Json中的parentId
					rootPId : 0			// 根节点设置为0
				},
				key : {
					name : "departName"	// 结点显示的name属性，对应到Json中的departName
				}
			},
			view : {
				dblClickExpand : false,	// 禁止双击展开
				selectedMulti : false	// 禁止多选
			},
			async : {
				enable : true,	// 采用异步方式获取所有节点数据,默认false
				url : "test!listByAjax.action"
			}
		};
		$.fn.zTree.init($("#tree"), setting);
});
</script>

可以看出，这已经是异步加载了，只不过是一次性把所有数据都拿了过来。

看了好多网上从台加载数据的资料，无不是自己手写了一个ajax从后如获取到数据，然后把数据给zTree进行初始化显示出来。其实zTree已经提供“async”这个属性，只要进行简单配置，就能显示出来。

4）. 看一看效果：

版权声明：本文为博主原创文章，未经博主允许不得转载。