?
源码下载地址：itxxzZTree
?
?
?
很多实际应用中，考虑到性能问题，树的加载方式都是ajax异步加载。ztree则很好的做到了这一点，下面通过代码看下是如何实现的。
"异步加载"
?
当访问itxxzZTree项目时，默认会展开根节点下面的子节点，而且父节点都有蓝色显著标识，下面就分别来讲解下。
ztree_v3的异步加载方式写法如下，注意，enable为true时才会进行加载。
- var?setting={??
- ???????????async:{??
- ????????????autoParam:["id"],??
- ????????????enable:true,??
- ????????????url:‘${pageContext.request.contextPath}/FileManagerServlet‘,??
- ????????????type:‘post‘??
- ???????????}?
autoParam:["id"]------自动向后抬提交的字段
enable:true-----------为true标识开启异步加载
url:‘${pageContext.request.contextPath}/FileManagerServlet‘, ?---------请求的地址
type:‘post‘ ----------请求的方式
"层级结构展现"
?
但是如果仅仅如此配置的话，传值与加载都是没有问题的，jsp显示：
这和第一张图对比，下面两个节点并没有在根节点下，反而是并列的。这是因为我们虽然为节点指定的父级节点，但是，我们指定的字段并非同ztree中解析的一致。
例如，我们自定义的父级节点为parendid，而ztree默认的父级节点标识为pid，这样对应不起来，当然就不会呈现上下级结构的展现。
这时候我们就需要统一一下，查看官方API：
- data:?{??
- ????????????????simpleData:?{??
- ????????????????????enable:?true,??
- ????????????????????idKey:?"id",??
- ????????????????????pIdKey:?"parentId"??
- ????????????????}??
- ??????????????
- ????????????} ?
这里就可以清楚的看到通过idKey:?"id"?和?pIdKey:?"parentId"?就可以统一起来了。
"字体样式"
我们可以封装一个函数function xxx()，通过返回值来指定字体的css，代码如下：
- view:?{??
- ????????????????fontCss:?setFontCss??
- ????????????},
- function?setFontCss(treeId,?treeNode)?{??
- ????????????if?(treeNode?&&?treeNode.isParent)?{??
- ??????????????????return?{color:?"blue"};??
- ???????????}?else?{??
- ??????????????????return?null;??
- ???????????}??
- ????????}; ?
?
"完整代码"
- <%@?page?language="java"?contentType="text/html;?charset=UTF-8"?pageEncoding="UTF-8"%>??
- <!DOCTYPE?html>??
- <html>??
- <head>??
- <meta?http-equiv="Content-Type"?content="text/html;?charset=UTF-8">??
- <title>IT学习者-itxxzZTree</title>??
- <script?type="text/javascript"?src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>??
- <script?type="text/javascript"?src="${pageContext.request.contextPath}/zTree_v3/js/jquery.ztree.core-3.5.js"></script>??
- <link?href="${pageContext.request.contextPath}/zTree_v3/css/zTreeStyle/zTreeStyle.css"?rel="stylesheet"?type="text/css"/>??
- ????<script?type="text/javascript">??
- ????????var?setting={??
- ???????????async:{??
- ????????????autoParam:["id"],??
- ????????????enable:true,??
- ????????????url:‘${pageContext.request.contextPath}/FileManagerServlet‘,??
- ????????????type:‘post‘??
- ???????????}?,??
- ???????????check:{??
- ??????????????enable:true,??
- ??????????????chkStyle:‘checkbox‘,??
- ??????????????chkboxType:?{?"Y":?"s",?"N":?"ps"?}??
- ??????????????
- ???????????},??
- ???????????view:?{??
- ????????????????fontCss:?setFontCss??
- ????????????},??
- ???????????data:?{??
- ????????????????simpleData:?{??
- ????????????????????enable:?true,??
- ????????????????????idKey:?"id",??
- ????????????????????pIdKey:?"parentId"??
- ????????????????}??
- ??????????????
- ????????????}??
- ????????};??
- ???
- ????????function?setFontCss(treeId,?treeNode)?{??
- ????????????if?(treeNode?&&?treeNode.isParent)?{??
- ??????????????????return?{color:?"blue"};??
- ???????????}?else?{??
- ??????????????????return?null;??
- ???????????}??
- ????????};??
- ?????????$(function(){??
- ????????????$.fn.zTree.init($("#tree"),setting);??
- ????????});??
- ???????????
- ????</script>??
- </head>??
- <body>??
- <div?id="itxxz">??
- <ul?id="tree"?class="ztree"></ul>??
- </div>??
- </body>??
- </html>??
-
ztree_v3 异步加载
原文：http://itxxz.iteye.com/blog/2166573
