zTree 使用教程
在实际的项目开发中,主要使用 zTree 来进行异步加载数据,如果数据量大
的话,这样可以大大的减少服务器的压力,初学 zTree,费了很多心思,现在总
结 zTree 的使用方法。
1. 下载 JQuery zTree v3.0.zip (有更高的版本)
2. 下
载
开
后
打
的
目
录
3. 然 后 引 人 css 和 js ( 必 须 要 放 入 相 应 的 位 置 , 特 别 是 css):
HTML页面代码:
zTree 案例
提交的action :返回一个json(其实就是一个字符串)数据,这里的json数据需
要自己来拼接,拼接好后返回就行了,json数据拼接成:
[{"id":"1","pId":"0","name":"张学友","isParent":true},
{"id":"11","pId":"1","name":"吻别"},
{"id":"2","pId":"0","name":"刘德华","isParent":true},
{"id":"21","pId":"2","name":"练习" }]
就可以了。
String json =
[{"id":"1","pId":"0","name":"张学友","isParent":true},
{"id":"11","pId":"1","name":"吻别"},
{"id":"2","pId":"0","name":"刘德华","isParent":true},
{"id":"21","pId":"2","name":"练习" }]
Out.print(json);
注意:如果要一次性加载全部数据的话,就直接从数据库取出全部数据来拼接就
行了,如果要异步加载数据的,就需要用到一个参数://获取json数据
async : {
enable : true,
url :
"${projectUtil.getWebRealPath()}/treeview/treeview!zTreeJSON.action",
// Ajax 获取数据的 URL 地址
autoParam : [ "id", "name" ] //ajax提交的时候,传的是id值
},
先从数据库取出最顶级数据。然后根据id号再从数据库查询。