码迷，mamicode.com
首页 > 其他好文 > 详细

【EasyUI学习-2】Easyui Tree的异步加载

时间：2015-06-11 10:52:36      阅读：239      评论：0      收藏：0      [点我收藏+]

标签：

作者：ssslinppp      

1. 摘要

easyui相关的介绍可以上其官网或者百度去搜索，这里不做介绍。
Easyui Tree的使用，官网或者easyui中文网站，也有相关介绍，但是官方提供的实例所使用的json是写死的，不是后台实时读取的。在实际的项目中，要显示的tree数据，一般都是从数据库中读取，然后通过通过ajax或者其他技术将tree的json数据发送到前台，然后显示。
本文将介绍easyui tree的异步加载，以及手动展开tree。

2. tree的相关介绍

技术分享
上图是一个tree，它对应json数据格式为：
  1. [{
  2. 	"id":1,
  3. 	"text":"My Documents",
  4. 	"children":[{
  5. 		"id":11,
  6. 		"text":"Photos",
  7. 		"state":"closed",
  8. 		"children":[{
  9. 			"id":111,
  10. 			"text":"Friend"
  11. 		},{
  12. 			"id":112,
  13. 			"text":"Wife"
  14. 		},{
  15. 			"id":113,
  16. 			"text":"Company"
  17. 		}]
  18. 	},{
  19. 		"id":12,
  20. 		"text":"Program Files",
  21. 		"children":[{
  22. 			"id":121,
  23. 			"text":"Intel"
  24. 		},{
  25. 			"id":122,
  26. 			"text":"Java",
  27. 			"attributes":{
  28. 				"p1":"Custom Attribute1",
  29. 				"p2":"Custom Attribute2"
  30. 			}
  31. 		},{
  32. 			"id":123,
  33. 			"text":"Microsoft Office"
  34. 		},{
  35. 			"id":124,
  36. 			"text":"Games",
  37. 			"checked":true
  38. 		}]
  39. 	},{
  40. 		"id":13,
  41. 		"text":"index.html"
  42. 	},{
  43. 		"id":14,
  44. 		"text":"about.html"
  45. 	},{
  46. 		"id":15,
  47. 		"text":"welcome.html"
  48. 	}]
  49. }]
从上面的json数据可以看出，tree的数据有固定格式，一般都包括下面几个：
  • id: 唯一标示；
  • text: 显示的文本；
  • children:子节点；
  • state：closed或open，表示节点是展开还是折叠；
  • attributes：属性，这里可以自定义若干属性；
等，还有其他一些属性，这里没有一一列举。
如果tree的内容不变，可以采用静态的方式显示，这个在官网上有实例，不再详述。
若果想通过异步的方式加载tree的json数据，则后台只需按照tree的数据格式生成相应的json，然后返回前台即可。下面将介绍异步加载tree数据。

3. 异步加载tree数据，并实现tree的折叠展开

3.1 功能说明：

技术分享
上图是整个tree的节点信息，这些数据都是从数据库中读取并显示的。但是在实际的项目中，可能tree的节点（children）会很多，若是一次全部加载，可能会很耗时，通常我们都是先加载父节点信息，然后点击“展开”，再加载子节点信息，如下图所示：
技术分享
上图中，我们首次加载时，【节点1】和【节点3】的子节点没有展开（加载），而【节点2】的子节点全部展开，当点击【节点1】的展开按钮时，再加载【节点1】的子节点，如下图所示：
技术分享

3.2 前台代码

jsp界面：
技术分享
  1. <%@ page language="java" pageEncoding="UTF-8"%>
  2. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
  3. <%
  4. 	String path = request.getContextPath();
  5. 	String basePath = request.getScheme() + "://"
  6. 			+ request.getServerName() + ":" + request.getServerPort()
  7. 			+ path + "/";
  8. 	response.setHeader("Pragma", "no-cache");
  9. 	response.setHeader("Cache-Control", "no-cache");
  10. 	response.setDateHeader("Expires", 0);
  11. %>
  13. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  14. <html>
  15. <head>
  16. <title>测试系统</title>
  17. <script type="text/javascript">var basePath = "<%=basePath%>";</script>
  18. <link rel="stylesheet" type="text/css"	href="<%=basePath%>js/easyui/themes/default/easyui.css">
  19. <link rel="stylesheet" type="text/css"	href="<%=basePath%>js/easyui/themes/icon.css">
  20. <link rel="stylesheet" type="text/css"	href="<%=basePath%>js/easyui/demo.css">
  22. <script type="text/javascript"	src="<%=basePath%>js/easyui/jquery.min.js"></script>
  23. <script type="text/javascript"	src="<%=basePath%>js/easyui/jquery.easyui.min.js"></script>
  24. <script type="text/javascript"	src="<%=basePath%>js/mytreeTest.js"></script>
  26. </head>
  27. <body>
  28. 	<h2>easyui tree</h2>
  29. 	<div class="easyui-layout" style="width:1300px;height:550px;">
  30. 		<div data-options="region:‘west‘,split:true,border:false" title="导航菜单" style="width:200px">
  31. 			    <ul id="myTree" class="easyui-tree"></ul>
  32. 		</div>
  33. 		<div data-options="region:‘center‘">
  34. 		</div>
  35. 	</div>
  36. </body>
  37. </html>
mytreeTest.js 
技术分享 
  1. $(function() {
  2. 	$(‘#myTree‘).tree({
  3. 		// checkbox: true,
  4. 		animate : true,
  5. 		lines : true,
  6. 		url : basePath + "loadTreeJson.action",  //默认会将节点的id传递到后台
  7. 		loadFilter : function(data) {   //必须有这个函数，否则出不来，不知道为什么
  8. 			return data.treeJson;
  9. 		},
  10. 		onClick : function(node) {
  11. 			alert("自己添加的属性： 【URL】"+node.attributes.url+",  【info】"+node.attributes.info);
  12. 		}
  13. 	});
  14. });

3.3 后台代码

我们采用了spring mvc。
为了实现tree的json格式数据的返回，我们在后台定义了一个类：TreeNodeInfo.java
技术分享
  1. package com.ll.domain;
  3. import java.util.List;
  4. import java.util.Map;
  6. public class TreeNodeInfo {
  7. 	private String id;                  //要显示的子节点的ID  
  8.     private String text;                //要显示的子节点的 Text  
  9.     private String state;
  10.     private String iconCls;             //节点的图标  
  11.     private String parentId;            //父节点的ID  
  12.     private List<TreeNodeInfo>  children;   //孩子节点的List
  13.     private boolean checked = false;
  14. //    private Map<String, Object>  attributes = new HashMap<String, Object>();
  15.     private Map<String, Object>  attributes;
  16.     
  17. 	public TreeNodeInfo() {
  18. 		super();
  19. 	}
  20. 	
  21. 	public TreeNodeInfo(String id, String text, String state, String iconCls,
  22. 			String parentId, List<TreeNodeInfo> children, boolean checked,
  23. 			Map<String, Object> attributes) {
  24. 		super();
  25. 		this.id = id;
  26. 		this.text = text;
  27. 		this.state = state;
  28. 		this.iconCls = iconCls;
  29. 		this.parentId = parentId;
  30. 		this.children = children;
  31. 		this.checked = checked;
  32. 		this.attributes = attributes;
  33. 	}
  36. 	public String getId() {
  37. 		return id;
  38. 	}
  39. 	public void setId(String id) {
  40. 		this.id = id;
  41. 	}
  42. 	public String getText() {
  43. 		return text;
  44. 	}
  45. 	public void setText(String text) {
  46. 		this.text = text;
  47. 	}
  48. 	public String getState() {
  49. 		return state;
  50. 	}
  51. 	public void setState(String state) {
  52. 		this.state = state;
  53. 	}
  54. 	public String getIconCls() {
  55. 		return iconCls;
  56. 	}
  57. 	public void setIconCls(String iconCls) {
  58. 		this.iconCls = iconCls;
  59. 	}
  60. 	public String getParentId() {
  61. 		return parentId;
  62. 	}
  63. 	public void setParentId(String parentId) {
  64. 		this.parentId = parentId;
  65. 	}
  66. 	public List<TreeNodeInfo> getChildren() {
  67. 		return children;
  68. 	}
  69. 	public void setChildren(List<TreeNodeInfo> children) {
  70. 		this.children = children;
  71. 	}
  72. 	public boolean isChecked() {
  73. 		return checked;
  74. 	}
  75. 	public void setChecked(boolean checked) {
  76. 		this.checked = checked;
  77. 	}
  78. 	public Map<String, Object> getAttributes() {
  79. 		return attributes;
  80. 	}
  81. 	public void setAttributes(Map<String, Object> attributes) {
  82. 		this.attributes = attributes;
  83. 	}
  85. }
loadTreeJson.action 
技术分享技术分享技术分享技术分享 
  1. package com.ll.web;
  3. import java.util.ArrayList;
  4. import java.util.HashMap;
  5. import java.util.List;
  6. import java.util.Map;
  8. import javax.servlet.http.HttpServletRequest;
  10. import org.springframework.beans.factory.annotation.Autowired;
  11. import org.springframework.stereotype.Controller;
  12. import org.springframework.ui.ModelMap;
  13. import org.springframework.web.bind.annotation.RequestMapping;
  15. import com.ll.domain.TreeNodeInfo;
  16. import com.ll.domain.User;
  17. import com.ll.service.IUserService;
  19. @Controller
  20. public class LoginController {
  22. 	@Autowired
  23. 	private IUserService userService;
  25. 	@RequestMapping(value = "/index.action")
  26. 	public String loginPage() {
  27. //		return "login";
  28. 		return "myEasyuiTree";
  29. 	}
  30. 	
  31. 	
  32. 	@RequestMapping(value = "/loadTreeJson.action")
  33. 	public String loadTreeJson(ModelMap mm, String id,String info) {
  34. 		List<TreeNodeInfo> treeList = new ArrayList<TreeNodeInfo>();
  35. 		
  36. 		if((id==null) || "".equals(id)){  //首次加载tree节点
  37. 			//模拟从数据库读数据，并将读出的数据赋值给treelist
  38. 			for (int i = 0; i < 5; i++) {
  39. 				TreeNodeInfo e = new TreeNodeInfo();
  40. 				e.setId(i+"");
  41. 				e.setText("节点【"+i+"】的内容");
  43. 				Map<String, Object> attributes = new HashMap<String, Object>();
  44. 				attributes.put("url", "www.baidu.com");
  45. 				attributes.put("info", "可以设置许多属性值，这是第"+i+"个节点");
  46. 				e.setAttributes(attributes);
  48. 				//模拟子节点的数量-第1个和第3个有子节点，默认closed；
  49. 				if ((i==1) || (i==3)) {
  50. 					// 节点状态，‘open‘ 或 ‘closed‘，默认是 ‘open‘。
  51. 					// 当设置为 ‘closed‘时，该节点有子节点，并且将从远程站点加载它们
  52. 					e.setState("closed");
  53. 				}
  54. 				//第2个节点也有子节点，但是默认open
  55. 				if((i==2)){
  56. 					List<TreeNodeInfo> node2ChildrenList = new ArrayList<TreeNodeInfo>();
  57. 					for (int j = 22; j < 25; j++) {
  58. 						TreeNodeInfo e2 = new TreeNodeInfo();
  59. 						e2.setId(j + "");
  60. 						e2.setText("节点【" + j + "】的内容");
  62. 						Map<String, Object> attributes2 = new HashMap<String, Object>();
  63. 						attributes2.put("url", "www.baidu.com");
  64. 						attributes2.put("info", "这是子节点【" + j + "】");
  65. 						e2.setAttributes(attributes2);
  66. 						
  67. 						node2ChildrenList.add(e2);
  68. 					}
  69. 					e.setChildren(node2ChildrenList);
  70. 				}
  71. 				treeList.add(e);
  72. 			}
  73. 			
  74. 			
  75. 		}else{ //展开节点
  76. 			//判断节点的id号
  77. 			if("1".equals(id)){    //有3个子节点
  78. 				for (int i = 10; i < 13; i++) {
  79. 					TreeNodeInfo e = new TreeNodeInfo();
  80. 					e.setId(i + "");
  81. 					e.setText("节点【" + i + "】的内容");
  83. 					Map<String, Object> attributes = new HashMap<String, Object>();
  84. 					attributes.put("url", "www.baidu.com");
  85. 					attributes.put("info", "这是子节点【" + i + "】");
  86. 					e.setAttributes(attributes);
  88. 					treeList.add(e);
  89. 				}
  90. 			}else if ("3".equals(id)) { //有4个子节点
  91. 				for (int i = 30; i < 34; i++) {
  92. 					TreeNodeInfo e = new TreeNodeInfo();
  93. 					e.setId(i + "");
  94. 					e.setText("节点【" + i + "】的内容");
  96. 					Map<String, Object> attributes = new HashMap<String, Object>();
  97. 					attributes.put("url", "www.baidu.com");
  98. 					attributes.put("info", "这是子节点【" + i + "】");
  99. 					e.setAttributes(attributes);
  101. 					treeList.add(e);
  102. 				}
  103. 			} 
  104. 		}
  105. 		
  106. 		mm.addAttribute("treeJson", treeList);
  107. 		return "treeJsonBean";
  108. 	}
  110. 	@RequestMapping(value = "/test.action")
  111. 	public String test(HttpServletRequest request, LoginCommand loginCommand) {
  112. 		System.out.println("用户名：" + loginCommand.getUserName() + "--密码："
  113. 				+ loginCommand.getPassword());
  115. 		User user = new User();
  116. 		user.setUserName(loginCommand.getUserName());
  117. 		user.setPassword(loginCommand.getPassword());
  118. 		userService.save(user);
  120. 		request.getSession().setAttribute("user", user);
  121. 		return "main";
  122. 	}
  123. }
当首次加载时，tree如下图所示：
技术分享
当点击展开【节点1】和【节点3】时，如下图所示：
技术分享
当点击tree节点时，会弹出：
技术分享

4. 其他

浏览器：http://localhost:8080/MainFrameTest/index.action ，执行该程序。

spring mvc配置：
技术分享技术分享
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <beans xmlns="http://www.springframework.org/schema/beans"
  3. 	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
  4. 	xmlns:context="http://www.springframework.org/schema/context" 
  5. 	xmlns:mvc="http://www.springframework.org/schema/mvc" 
  6. 	xsi:schemaLocation="http://www.springframework.org/schema/beans
  7.        http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
  8.        http://www.springframework.org/schema/context 
  9.        http://www.springframework.org/schema/context/spring-context-3.0.xsd
  10.        http://www.springframework.org/schema/mvc 
  11.        http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
  12. 	<!-- 扫描web包，应用Spring的注解 -->
  13. 	<context:component-scan base-package="com.ll.web" />
  15. 	<mvc:annotation-driven /> 
  16. 	
  18. 	<!-- 配置视图解析器，将ModelAndView及字符串解析为具体的页面 -->
  19. 	<bean
  20. 		class="org.springframework.web.servlet.view.InternalResourceViewResolver"
  21. 		p:viewClass="org.springframework.web.servlet.view.JstlView" p:prefix="/jsp/"
  22. 		p:suffix=".jsp" />
  24. 	<!-- bean 视图解析器 -->
  25. 	<bean class="org.springframework.web.servlet.view.BeanNameViewResolver"
  26. 		p:order="10" />
  28. 	<!-- 返回tree-json 状态 -->
  29. 	<bean id="treeJsonBean"
  30. 		class="org.springframework.web.servlet.view.json.MappingJacksonJsonView">
  31. 		<property name="renderedAttributes">
  32. 			<set>
  33. 				<value>treeJson</value>
  34. 			</set>
  35. 		</property>
  36. 	</bean>
  38. </beans>




附件列表

     

    【EasyUI学习-2】Easyui Tree的异步加载

    标签：

    原文地址：http://www.cnblogs.com/ssslinppp/p/4568196.html
    踩
    (0)
    赞
    (0)
       
    举报
    评论 一句话评论（0）
    登录后才能评论！
    分享档案
    更多>
    2021年07月29日 (22)
    2021年07月28日 (40)
    2021年07月27日 (32)
    2021年07月26日 (79)
    2021年07月23日 (29)
    2021年07月22日 (30)
    2021年07月21日 (42)
    2021年07月20日 (16)
    2021年07月19日 (90)
    2021年07月16日 (35)
    周排行
    mamicode.com排行更多图片
    更多
    友情链接
    兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
    关于我们 - 联系我们 - 留言反馈
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码！