ssslinppp

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
【EasyUI学习-2】Easyui Tree的异步加载
作者：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>




附件列表

     

    posted on 2015-06-11 10:01  ssslinppp  阅读(10168)  评论(0)  编辑  收藏  举报