博客

晚上有时间 写下项目里用过的 开源JS 树ZTREE （官网传送门 http://www.ztree.me/v3/main.php#_zTreeInfo），js插件自己去官网下吧。

1.实现要求 后台使用JAVA代码 （struts2 ）查表数据 然后转用API转成JSON数组。

2.前台JSP页面用ztree3.5 构建菜单树 ，点击单个节点 替换iframe 切换页面。

代码：

页面部分

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/commons/taglibs.jsp"%>//jsp lib 引入处
<link href="/adminthemes/default/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/adminthemes/default/js/jquery.ztree.core-3.5.min.js"></script>
<style>
#innerZtree {
    border-bottom: 3px solid #D3E9F8;
    border-right: 2px solid #D3E9F8;
    float: left;
    width:auto;
}
</style> 
//左边树
<div id="innerZtree" position="left" title="菜单树" style="float: left;width: 18% !important;height:100%;">
	<ul id="menuTree" class="ztree" ></ul>
</div>
//右边iframe
<div style="float:right;width:81%;height:100%;">
	<iframe id='inner_iframe' width='100%' height='600px' frameborder='0px' src=""></iframe>	
</div>
<script>
	var menuTree = null;
	//树展开层数
	$(function() {
		//首先加载菜单数据。
		loadTree(1);
	});
	
	//展开收起
	function treeExpandAll() {
		menuTree = $.fn.zTree.getZTreeObj("menuTree");
		menuTree.expandAll(true);
	};
	
	function loadTree(value) {
		var setting = {
				data: {
					key : {
						name: "name"
					},
					/*自己定义的数据 格式  */
					simpleData: {
						enable: true,
						idKey: "id",
						pIdKey: "pid",
						rootPId: null
					}
				},
				async: {
					enable: true,
					url:"admin/buttonMenu!listByRole.do?ajax=yes&roleid="+value,
					autoParam:["roleid",value]
				},
				callback:{
					onClick : treeClick, /*  */
					onAsyncSuccess: treeExpandAll /*一直调试不出默认树全展开 是用回调方法了 */
				}
			};
			menuTree=$.fn.zTree.init($("#menuTree"), setting);
	};

	//树节点的点击事件
	function treeClick(event, treeId, treeNode) {
		var link = "http://www.baidu.com";//test URL地址可以换上自己后台的地址
		//var link = "/admin/buttonControl!list.do?menuid="+treeNode.id+"&menuurl="+treeNode.menuurl;
		//if(treeNode.isParent==true){
			//alert("只能在末级菜单加上权限");
		//	link = "admin/buttonControl!nothing.do";
		//}
		$("#inner_iframe").attr("src", link);
	}
</script>

JAVA代码片段：

/**
	 * 菜单树 JSONArray
	 * @return jarray.toString()
	 */
	public String listByRole(){
		//
		AuthAction authAction = buttonMenuManager.getAuthAction(roleid);
		//构建树需要的数据
		List<ButtonMenu> menuList = this.buttonMenuManager.getMenuList4BtnTree(authAction);
		JSONArray jarray = JSONArray.fromObject(menuList);
		this.json = jarray.toString();
		//System.out.println("this.json==="+this.json);
		return this.JSON_MESSAGE;
	}

上面其实就是返回一段JSON数组 ，类似这样的：

[{id:1,pid:0,name:’节点1′},{id:2,pid:1,name:’节点2′},{id:3,pid:1,name:’节点3′},{id:4,pid:0,name:’节点4′},{id:5,pid:4,name:’节点5′}]