zTree—一次性加载树

来源：互联网发布：超级基因优化液txt全集下载编辑：程序博客网时间：2024/04/28 22:32

zTree是一个很好的js插件实现加载树形结构，今天介绍怎么一次性加载？

1.建实体

/** * 菜单项 * @author xx * */public class Menuitem implements Serializable {private Long mid;private Long pid;//父节点IDprivate String name;//树上的节点的名称private Boolean isParent;//是否为文件夹节点private String icon;//图标图片的路径private Set<User> users;public Long getMid() {return mid;}public void setMid(Long mid) {this.mid = mid;}public Long getPid() {return pid;}public void setPid(Long pid) {this.pid = pid;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Boolean getIsParent() {return isParent;}public void setIsParent(Boolean isParent) {this.isParent = isParent;}public String getIcon() {return icon;}public void setIcon(String icon) {this.icon = icon;}public Set<User> getUsers() {return users;}public void setUsers(Set<User> users) {this.users = users;}}

2.controller代码

/** * 查询树节点的controller * @author xx * */@Controller("menuitemAction")@Scope("prototype")public class MenuitemAction extends BaseAction<Menuitem>{    @Resource(name="menuitemService")    private MenuitemService menuitemService;        /**     * 节点的list     */    private Collection<Menuitem> menuitemList;        public Collection<Menuitem> getMenuitemList() {        return menuitemList;    }    /**     * 查询所有的节点     * @return     */    @JSON(serialize=false)    public String getAllMenuitem(){        this.menuitemList = this.menuitemService.getAllMenuitems();        return SUCCESS;    }}

返回json格式的数据

3.html页面

 <script src="js/jquery-1.4.2.js"></script>  <script src="js/jquery-ztree-2.5.js"></script>  <link rel="stylesheet" type="text/css" href="zTreeStyle/zTreeStyle.css">  <script src="js/tree.js"></script>  <body>    This is my HTML page. <br><div><ul id="tree" class="tree" style="width:230px; overflow:auto;"></ul></div>  </body>

4.js

var tree = {setting:{isSimpleData: true,treeNodeKey: "mid",treeNodeParentKey: "pid",showLine: true,root:{ isRoot:true,nodes:[]}},/** * 1、回调函数是由服务器端触发的，什么时候执行由服务器决定 * 2、回调函数是由jQuery内核调用的 * 3、客户端存在两个线程 * 4、如果在js代码中，有一些代码要用到回调函数中的数据，那么这些代码必须放在回调函数中 */loadTree:function(){$.post("menuitemAction_getAllMenuitem.action",null,function(data){$("#tree").zTree(tree.setting,data.menuitemList);});}};$().ready(function(){tree.loadTree();});

5.页面效果

这个插件很简单，根据给出的demo，简化了之后就能做出简单的树形结构。

1 0