zTree与java后台结合

最近正在使用zTree插件,专门用来实现树形菜单。

这里简述一下我操作的过程

下载zTree插件

http://www.treejs.cn/v3/demo.php#_306

这里我通过ajax发送请求获得表中的数据(这里的数据就是要进行树形菜单的)

前台

$.ajax({
			type:"POST",			
			url:"sTree",
			data:{t:Math.random()},
			dataType:"json",
			success:function(res){
				//console.log(res);
				var zNodes = res;
				var setting = {
						view: {
							selectedMulti: false
						},
						edit: {
							enable: true,
							showRemoveBtn: false,
							showRenameBtn: false
						},
						data: {
							keep: {
								parent:true,
								leaf:true
							},
							simpleData: {
								enable: true
							}
						},
						callback: {
							beforeDrag: beforeDrag,
							beforeRemove: beforeRemove,
							beforeRename: beforeRename,
							onRemove: onRemove
						}
					};
				$.fn.zTree.init($("#treeDemo"), setting, zNodes);
				
			}
		});
后台:(这里我最多只写了二级菜单。。。)
@RequestMapping(value = "/sTree",produces = "application/json; charset=utf-8")
	@ResponseBody
	public String systemStree(HttpServletRequest request, HttpServletResponse response){
		List list = funService.selectAlls();
		
		StringBuilder sb = new StringBuilder();
		
		//排序  不在数据库中处理,格式如: 只处理二级的
		/*{ id:1, pId:0, name:"父节点 1", open:true},
		{ id:11, pId:1, name:"叶子节点 1-1"},
		{ id:12, pId:1, name:"叶子节点 1-2"},
		{ id:13, pId:1, name:"叶子节点 1-3"},
		{ id:2, pId:0, name:"父节点 2", open:true},
		{ id:21, pId:2, name:"叶子节点 2-1"},
		{ id:22, pId:2, name:"叶子节点 2-2"},
		{ id:23, pId:2, name:"叶子节点 2-3"},
		{ id:3, pId:0, name:"父节点 3", open:true},
		{ id:31, pId:3, name:"叶子节点 3-1"},
		{ id:32, pId:3, name:"叶子节点 3-2"},
		{ id:33, pId:3, name:"叶子节点 3-3"}*/
		for (Fun fun : list) {
			if(fun.getFunfathernode().equals("0")){
				if(sb.toString().equals("")){
					sb.append("{ \"id\":\""+fun.getFunid()+"\", \"pId\":\""+fun.getFunfathernode()+"\", \"name\":\""+fun.getFunname()+"\"}");
				}
				else{
					sb.append(",{ \"id\":\""+fun.getFunid()+"\", \"pId\":\""+fun.getFunfathernode()+"\", \"name\":\""+fun.getFunname()+"\"}");
				}
				
				for (Fun funson : list) {
					if(funson.getFunfathernode().equals(fun.getFunid())){
						sb.append(",{ \"id\":\""+funson.getFunid()+"\", \"pId\":\""+funson.getFunfathernode()+"\", \"name\":\""+funson.getFunname()+"\"}");
					}
				}
			}
		}
		return "["+sb.toString()+"]";
	}


显示:

zTree与java后台结合_第1张图片


你可能感兴趣的:(随手记)