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

来源：互联网发布：python 替换所有符号编辑：程序博客网时间：2024/05/18 03:16

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

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

/** * map的形式加载所有的部门 * @returnList<DepTree> * 部门的List集合 * @author张连海 * @since2015.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字符串，并传给前台页面。

/** * 加载全部部门 *  * @returnnull * @throws Exception * @author张连海 * @since2015.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中的idpIdKey : "parentId",// 结点的pId,对应到Json中的parentIdrootPId : 0// 根节点设置为0},key : {name : "departName"// 结点显示的name属性，对应到Json中的departName}},view : {dblClickExpand : false,// 禁止双击展开selectedMulti : false// 禁止多选},async : {enable : true,// 采用异步方式获取所有节点数据,默认falseurl : "test!listByAjax.action"}};$.fn.zTree.init($("#tree"), setting);});</script>

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

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

4）. 看一看效果：

1 0