zTree—一次性加载树

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ggibenben1314/article/details/46537471

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

1.建实体

/**
 * 菜单项
 * @author xx
 *
 */
public class Menuitem implements Serializable {
	private Long mid;
	private Long pid;//父节点ID
	private 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,简化了之后就能做出简单的树形结构。

         

展开阅读全文

没有更多推荐了,返回首页