`

用ztree构造树菜单

javajsonAjax 
阅读更多
ztree,很好用的组件今天用它来练练手,感觉挺好用的,过程中,还是要心细,组织数据不能出错
页面: 
<!--ztree样式引入-->
		<link rel="stylesheet"  href="<%=basePath%>css/zTreeStyle/zTreeStyle.css" type="text/css">
		<!--jquery包引入	-->
		<script type="text/javascript" src="<%=basePath%>js/jquery-1.4.4.min.js"></script>
		<!--ztree包引入	-->
		<script type="text/javascript" src="<%=basePath%>js/jquery.ztree.core-3.5.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var setting;
				function happenError(event,treeId,treeNode,msg){
					alert("加载失败啦");
				}
				function doSuccess(event,treeId,treeNode,msg){
					alert("加载成功啦"+msg);
				}
				function zTreeOnclick(event,treeId,treeNode,msg)
				{
					alert("你点击了节点"+msg);
				}
				setting = {
					async:{
						autoParam: ["id"],
						enable: true,
						dataType:"json",
						enable:true,
						type:"post",
						otherParam:{"id":"0"},
						url: "<%=basePath%>"+"servlet/Tree"
					},
					data:{
						keep:{
							leaf:false,
							parent:true
						},
						key:{
							children:"children",
							name:"name",
							url:"xUrl"
						},
						simpleData:{
							enable:true,
							idKey:"id",
							pIdKey:"pId",
							rootPid:null
						}
					},
					callback:{
							onAsyncError:happenError,
							onAsyncSuccess:doSuccess,
							onClick:zTreeOnclick
					}
				}
				$(document).ready(function(){
					$.fn.zTree.init($("#treeMe"), setting);
				})
			});
		</script>
	</head>
	<body>
		<div>
			<ul id="treeMe" class="ztree"></ul>
		</div>
	</body>


后台组织了简单的几个节点: 
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		int idString = Integer.parseInt(request.getParameter("id"));
		System.out.println(idString);
		//构造节点,对具体应用,可从数据库中取数据进行构造
		List<Node> list = new ArrayList<Node>();
		Node node2= new Node();
		node2.setParent(false);
		node2.setName("sonNode");
		List<Node> childrenList = new ArrayList<Node>();
		childrenList.add(node2);
		
		Node node1 = new Node();
		node1.setParent(true);
		node1.setName("parentNode");
		node1.setChildren(childrenList);
		
		Node node3 = new Node();
		node3.setParent(false);
		node3.setName("parentNode3");
		
		list.add(node1);
		list.add(node3);
		System.out.println(JSONArray.fromObject(list).toString());
		//以JSON数据模式反回给前台
		out.print(JSONArray.fromObject(list).toString());
	}


节点类的简单定义
public class Node implements Serializable {
	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private List<Node> children;//字节点集合
	private String icon;//自定义节点图标url路径
	private String iconClose;//自定义父节点折叠图标url路径
	private String iconOpen;//自定义父节点展开图标url路径
	private String iconSkin;//节点自定义图标的 className 需要修改 css，增加相应 className 的设置
	private boolean isParent;//是否是父节点
	private String name;//节点名称
	private boolean open;//是否展开
	public String getIcon() {
		return icon;
	}
	public void setIcon(String icon) {
		this.icon = icon;
	}
	public String getIconClose() {
		return iconClose;
	}
	public void setIconClose(String iconClose) {
		this.iconClose = iconClose;
	}
	public String getIconOpen() {
		return iconOpen;
	}
	public void setIconOpen(String iconOpen) {
		this.iconOpen = iconOpen;
	}
	public String getIconSkin() {
		return iconSkin;
	}
	public void setIconSkin(String iconSkin) {
		this.iconSkin = iconSkin;
	}
	public boolean isParent() {
		return isParent;
	}
	public void setParent(boolean isParent) {
		this.isParent = isParent;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public boolean isOpen() {
		return open;
	}
	public void setOpen(boolean open) {
		this.open = open;
	}
	public void setChildren(List<Node> children) {
		this.children = children;
	}
	public List<Node> getChildren() {
		return children;
	}
}
分享到：
| spring简单aop切面示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics