ztree的使用经验2(动态获取后台ztree数据)

≡放荡痞女 提交于 2020-03-04 05:54:03

经过尝试,发现ztree动态获取后台数据的方式有两种。一种是通过ajax调用后台数据获取数据后,赋予ztree;另一种是通过ztree插件自身的功能获取数据。但是两种获取方式是有区别的。使用ztree动态调取数据,点击展开栏时会再次默认请求路径。而ajax只能调取一次(需要通过点击展开栏事件才能实现这个效果),所以目前ztree会较为便捷。好了,直接上代码吧。
一、ajax调取数据

  1. 后台代码
    (这里就不连接数据库了,因为连接数据库还要给出表结构。如果要连接数据库,原理也是一样的。只要把查询出的数据进行循环,动态赋予map,存入集合中就可以将数据库的数据完美的展示在前端。)
@ResponseBody
	@RequestMapping("getData")
	public List<Map<String, Object>> getData() {
		Map<String, Object> map1 = new HashMap<String, Object>();
		Map<String, Object> map2 = new HashMap<String, Object>();
		Map<String, Object> map3 = new HashMap<String, Object>();
		//区域 code
		map1.put("code", "36000");
		map2.put("code", "35000");
		map3.put("code", "34000");

		//判断是否是父节点,影响页面树结构的样式
		map1.put("isParent", "false");
		map2.put("isParent", "false");
		map3.put("isParent", "true");

		//区域名称,treeName是在treeSetting自定义的,默认为name
		map1.put("treeName", "福建省");
		map2.put("treeName", "江西省");
		map3.put("treeName", "湖北省");

		//节点类型
		map1.put("nodeType", "region");
		map2.put("nodeType", "region");
		map3.put("nodeType", "region");

		List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
		list.add(map1);
		list.add(map2);
		list.add(map3);
		return list;

	}
  1. 前台代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="<%=basePath%>res/js/jquery-1.3.2.min.js"></script>
		<link rel="stylesheet"href="<%=basePath%>res/zTree/css/metroStyle/metroStyle.css" />
		<script src="<%=basePath%>res/js/jquery.ztree.all.min.js"></script>
	</head>
<body>
	<div>
		<ul id="regionTree" class="ztree"></ul>
	</div>
	<script>
		var treeSetting = {
			data : {
				key : {
					name : "treeName" //zTree 节点的名称辨识字段,默认为name
				}
				},
				async: {
	        			enable: true,//异步处理,默认是false。这样保证不会一次性加载所有数据。不点击节点,就不会去查下一级数据,主要针对大量数据。
	        			url:"<%=basePath%>peam/ztree/getData",//异步获取json格式数据的路径
						type:"post" //提交方式
	        		},
				check : {
					enable : true //设置是否显示多选框,默认为false
				},
				callback : {
					onClick : treeClick //点击树节点,触发的事件。treeClick为自定义的事件
				}

		};

		function treeClick(event, treeId, treeNode) {
			alert(treeNode.treeName);
		}
		
		 $(document).ready(function(){
			 $.ajax({
				   url:"<%=basePath%>peam/ztree/getData",  
				   type:"post",
				   dataType:"json", 
				   success:function(data){	
				   console.log(data);
				   $.fn.zTree.init($("#regionTree"), treeSetting, data);   
				   } 
				});	
		
		});
		
		

	</script>
</body>
</html>

`
二、通过ztree插件获取数据

  1. 后台代码
	@ResponseBody
	@RequestMapping("getData3")
	public List<Map<String, Object>> getData3(HttpServletRequest request) {
		List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
		String code = request.getParameter("code");
		System.out.println("code===" + code);
		if (code == null || code == "") {
			Map<String, Object> map1 = new HashMap<String, Object>();
			Map<String, Object> map2 = new HashMap<String, Object>();
			Map<String, Object> map3 = new HashMap<String, Object>();
			// 区域 code
			map1.put("code", "36000");
			map2.put("code", "35000");
			map3.put("code", "34000");

			// 判断是否是父节点,影响页面树结构的样式
			map1.put("isParent", "true");
			map2.put("isParent", "true");
			map3.put("isParent", "true");

			// 区域名称,treeName是在treeSetting自定义的,默认为name
			map1.put("treeName", "福建省");
			map2.put("treeName", "江西省");
			map3.put("treeName", "湖北省");

			// 节点类型
			map1.put("nodeType", "region");
			map2.put("nodeType", "region");
			map3.put("nodeType", "region");

			list.add(map1);
			list.add(map2);
			list.add(map3);
		} else if (code.equals("36000")) {
			Map<String, Object> map1 = new HashMap<String, Object>();
			Map<String, Object> map2 = new HashMap<String, Object>();
			Map<String, Object> map3 = new HashMap<String, Object>();
			// 区域 code
			map1.put("code", "36100");
			map2.put("code", "36200");
			map3.put("code", "36300");

			// 判断是否是父节点,影响页面树结构的样式
			map1.put("isParent", "false");
			map2.put("isParent", "false");
			map3.put("isParent", "false");

			// 区域名称,treeName是在treeSetting自定义的,默认为name
			map1.put("treeName", "福州市");
			map2.put("treeName", "厦门市");
			map3.put("treeName", "莆田市");

			// 节点类型
			map1.put("nodeType", "region");
			map2.put("nodeType", "region");
			map3.put("nodeType", "region");

			list.add(map1);
			list.add(map2);
			list.add(map3);
		} else if (code.equals("35000")) {
			Map<String, Object> map1 = new HashMap<String, Object>();
			// 区域 code
			map1.put("code", "35100");

			// 判断是否是父节点,影响页面树结构的样式
			map1.put("isParent", "false");

			// 区域名称,treeName是在treeSetting自定义的,默认为name
			map1.put("treeName", "南昌市");

			// 节点类型
			map1.put("nodeType", "region");

			list.add(map1);

		} else if (code.equals("34000")) {
			Map<String, Object> map1 = new HashMap<String, Object>();
			// 区域 code
			map1.put("code", "34100");

			// 判断是否是父节点,影响页面树结构的样式
			map1.put("isParent", "false");

			// 区域名称,treeName是在treeSetting自定义的,默认为name
			map1.put("treeName", "武汉市");

			// 节点类型
			map1.put("nodeType", "region");

			list.add(map1);

		}

		return list;

	}
  1. 前台代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="<%=basePath%>res/js/jquery-1.3.2.min.js"></script>
<link rel="stylesheet"
	href="<%=basePath%>res/zTree/css/metroStyle/metroStyle.css" />
<script src="<%=basePath%>res/js/jquery.ztree.all.min.js"></script>
</head>
<body>
	<div>
		<ul id="regionTree" class="ztree"></ul>
	</div>
	<script>
		var treeSetting = {
			data : {
				key : {
					name : "treeName" //zTree 节点的名称辨识字段,默认为name
				}
				},
		 		async: {
	        			enable: true,//异步处理,默认是false。这样保证不会一次性加载所有数据。不点击节点,就不会去查下一级数据,主要针对大量数据。
	        			url:"<%=basePath%>peam/ztree/getData3",//异步获取json格式数据的路径
	        			autoParam:["code"],
						type:"post" //提交方式
	        		}, 
				check : {
					enable : true //设置是否显示多选框,默认为false
				},
				callback : {
					onClick : treeClick //点击树节点,触发的事件。treeClick为自定义的事件
				}

		};

	 $.fn.zTree.init($("#regionTree"), treeSetting);   
	/* 	zTreeObj = $.fn.zTree.init($("#regionTree"), treeSetting, datas); //初始化树 */
		/* zTreeObj.expandAll(true);//展开所有节点 */
		//返回节点名和节点tid和节点自定义的value,一般参数使用的都是treeNode(被点击的节点 JSON 数据对象)
		function treeClick(event, treeId, treeNode) {
			alert( treeNode.treeName);
		}
		
		

	</script>
</body>
</html>


有待深入…看后续

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!