使用 zTree 动态加载树形菜单

xurichusheng

浏览: 344824 次
性别:
来自: 南京

最近访客更多访客>>

ssssd1000

jh108020

aininim

wst302

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ztree

1. 框架：

jquery-1.8.3.js

jquery.ztree.core-3.5.js

Spring-3.2.4

js及css见附件

2. 加载的数据

省市数据。

思路：一进入页面，首先加载省一级信息，当点击省的时候，到后台查找该省下面的所有的市，然后加载到该省下。

3. 表（HW_DEPT）结构

4. 查找省一级数据dao方法

public List<HwDept> findProvinceDept(String provinceId) throws Exception {

		StringBuffer sql = new StringBuffer(100);

		sql.append("SELECT * FROM HW_DEPT ");
		sql.append(" WHERE DEPT_LEVEL = '3' AND MANAGE_LEVEL = '3'");

		if (null != provinceId && !"".equals(provinceId.trim())) {
			sql.append(" AND DEPT_ID = '").append(provinceId).append("'");
		}

		sql.append(" ORDER BY DEPT_NAME ASC");

		return getJdbcTemplate().query(sql.toString(), new RowMapper<HwDept>() {

			@Override
			public HwDept mapRow(ResultSet rs, int rowNum) throws SQLException {

				HwDept dept = new HwDept();

				dept.setDeptId(rs.getString("DEPT_ID"));
				dept.setDeptName(rs.getString("DEPT_NAME"));
				dept.setDeptLevel(rs.getString("DEPT_LEVEL"));
				dept.setManageLevel(rs.getString("MANAGE_LEVEL"));
				dept.setParentId(rs.getString("PARENT_ID"));

				return dept;
			}
		});
	}

5. 查找省一级数据controller方法

@RequestMapping("/getProvinceTree")
	public void getProvinceTree(HttpServletResponse resp) {

		PrintWriter out = null;

		try {
			out = resp.getWriter();

			// 当前登录用户
			ShiroUser shiroUser = SubjectUtils.getPrincipal();
			User user = userService.findOne("loginName",
					shiroUser.getLoginName());

			// 查找省一级部门信息
			List<HwDept> depts = hwDeptService.findProvinceDept(user
					.getProvinceId());
			//
			// JSONArray json = JSONArray.fromObject(depts);

			// 将集合对象拼接成json字符串
			String json = buildProvinceJSON(depts);

			log.info("Province Tree json is:\r\n" + json);

			// 传到前台js
			out.write(json);

			// JSONArray outArray = hwDeptService.findProvinceDept();

			// out.write(json.toString());
			out.flush();

		} catch (IOException e) {
			log.error("Get Province Tree fail:" + e.getMessage(), e);
		} catch (Exception e) {
			log.error("Get Province Tree fail:" + e.getMessage(), e);
		} finally {
			if (null != out) {
				out.close();
			}
		}
	}

private String buildProvinceJSON(List<HwDept> list) throws Exception {

		StringBuffer json = new StringBuffer(1000);

		for (HwDept dept : list) {

			json.append("{");
			json.append("id:\"").append(dept.getDeptId()).append("\",");
			json.append("pId:").append("0").append(",");
			json.append("name:").append("\"").append(dept.getDeptName())
					.append("\"").append(",");
			json.append("isParent:").append("true").append(",");
			json.append("open:").append("false");
			json.append("}").append(",");
		}

		String s = json.toString();

		if (s.endsWith(",")) {
			// 去掉最后面的逗号
			s = s.substring(0, s.lastIndexOf(","));
		}

		StringBuffer buf = new StringBuffer("[");

		buf.append(s);

		buf.append("]");

		return buf.toString();
	}

6. jsp

<ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>

7. js

<script type="text/javascript">
/* 树形菜单 */
var zTree;
var demoIframe;

var setting = {
	view: {
		dblClickExpand: false,
		showLine: true,
		selectedMulti: false
	},
	data: {
		simpleData: {
			enable:true,
			idKey: "id",
			pIdKey: "pId",
			rootPId: ""
		}
	},
	callback: {
		/*
		beforeClick: function(treeId, treeNode) {
			alert(treeNode);
			var zTree = $.fn.zTree.getZTreeObj("tree");
			if (treeNode.isParent) {
				alert(treeNode);
				zTree.expandNode(treeNode);
				return false;
			} else {
				demoIframe.attr("src",treeNode.file + ".html");
				return true;
			}
		},
		*/
		onClick: reLoadOpenURL,//节点被点击时调用的函数
		beforeExpand: zTreeBeforeExpand //用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
	}
};
$(function(){
			
	var zNodes;
	var zTreeObj;
	
	$.ajax({
		url : "${ctx}/hw/dept/getProvinceTree",
		type : "POST",
		dataType: "text", // 字符串格式
		success : function (strReult) {
			// 将json字符串转成json对象
			zNodes = eval("(" + strReult + ")");
			
			zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes);
			
		}, error: function () {
			alert("获取省公司数据失败!");
		}
	});
});
</script>

结果如下：

下面加载子节点，点击省前面的加号（+），到后台查找对应的市一级数据，然后加载显示。

8. 根据省份id查找对应的市级信息dao方法

public List<HwDept> findByPId(String parentId) throws Exception {

		String sql = "SELECT * FROM HW_DEPT WHERE PARENT_ID = ? ORDER BY DEPT_NAME ASC";

		return getJdbcTemplate().query(sql, new Object[] { parentId },
				new RowMapper<HwDept>() {

					@Override
					public HwDept mapRow(ResultSet rs, int rowNum)
							throws SQLException {

						HwDept dept = new HwDept();

						dept.setDeptId(rs.getString("DEPT_ID"));
						dept.setDeptName(rs.getString("DEPT_NAME"));
						dept.setDeptLevel(rs.getString("DEPT_LEVEL"));
						dept.setManageLevel(rs.getString("MANAGE_LEVEL"));
						dept.setParentId(rs.getString("PARENT_ID"));

						return dept;
					}
				});
	}

9. 根据省份id查找对应的市级信息controller方法

@RequestMapping("/getCityTree")
	public void getCityTree(HttpServletResponse resp,
			@RequestParam("parentId") String parentId) {

		log.info("Get City Tree, parentId=" + parentId);

		PrintWriter out = null;

		try {
			out = resp.getWriter();

			List<HwDept> depts = hwDeptService.findByPId(parentId);

			// 将集合对象拼接成json字符串
			String json = buildCityJSON(depts, parentId);

			log.info("City Tree json is:\r\n" + json);

			// 传到前台js
			out.write(json);

			out.flush();

		} catch (IOException e) {
			log.error("Get City Tree fail:" + e.getMessage(), e);
		} catch (Exception e) {
			log.error("Get City Tree fail:" + e.getMessage(), e);
		} finally {
			if (null != out) {
				out.close();
			}
		}
	}

private String buildCityJSON(List<HwDept> list, String parentId)
			throws Exception {

		StringBuffer buf = new StringBuffer(1000);

		for (HwDept dept : list) {

			buf.append("{");
			buf.append("id:\"").append(dept.getDeptId()).append("\",");
			buf.append("pId:").append("\"").append(parentId).append("\",");
			buf.append("name:").append("\"").append(dept.getDeptName())
					.append("\"").append(",");
			buf.append("isParent:").append("true").append(",");
			buf.append("open:").append("false");
			buf.append("}").append(",");
		}

		String s = buf.toString();

		if (s.endsWith(",")) {
			// 去掉最后面的逗号
			s = s.substring(0, s.lastIndexOf(","));
		}

		StringBuffer json = new StringBuffer(1000);

		json.append("[");

		json.append(s);

		json.append("]");

		return json.toString();
	}

10. 加载子节点js方法

// beforeExpand: 用于捕获父节点展开之前的事件回调函数，并且根据返回值确定是否允许展开操作
		function zTreeBeforeExpand(treeId, treeNode) {

			var zTree = $.fn.zTree.getZTreeObj(treeId);
			
			if (treeNode.isParent) {
				/*如果是父节点*/
				if(treeNode.open){
					/*父节点为展开状态，则折叠父节点*/
					zTree.expandNode(treeNode,false,true,true,false);
				} else {
					/*父节点为折叠状态,点击展开后加载子节点 */
					var parentId = treeNode.id;
					$.ajax({
						url : "${ctx}/hw/dept/getCityTree",
						type : "POST",
						dataType: "text", // 字符串格式
						data: {parentId : parentId},
						success : function (data1) {
							
				            // 将json字符串转成json对象
				            zNodes = eval("(" + data1 + ")");
				            
				            zTree.addNodes(treeNode, zNodes); 
							
						}, error: function () {
							alert("获取市公司数据失败!");
						}
					});
				}
			}
		}

11. 结果如下：