作者:ssslinppp      


1. 摘要



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

2. tree的相关介绍



【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP
上图是一个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 功能说明:

【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP
上图是整个tree的节点信息,这些数据都是从数据库中读取并显示的。但是在实际的项目中,可能tree的节点(children)会很多,若是一次全部加载,可能会很耗时,通常我们都是先加载父节点信息,然后点击“展开”,再加载子节点信息,如下图所示:
【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP
上图中,我们首次加载时,【节点1】和【节点3】的子节点没有展开(加载),而【节点2】的子节点全部展开,当点击【节点1】的展开按钮时,再加载【节点1】的子节点,如下图所示:
【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP

3.2 前台代码

jsp界面:
【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP
  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. %>
  12. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  13. <html>
  14. <head>
  15. <title>测试系统</title>
  16. <script type="text/javascript">var basePath = "<%=basePath%>";</script>
  17. <link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/themes/default/easyui.css">
  18. <link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/themes/icon.css">
  19. <link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/demo.css">
  20. <script type="text/javascript" src="<%=basePath%>js/easyui/jquery.min.js"></script>
  21. <script type="text/javascript" src="<%=basePath%>js/easyui/jquery.easyui.min.js"></script>
  22. <script type="text/javascript" src="<%=basePath%>js/mytreeTest.js"></script>
  23. </head>
  24. <body>
  25. <h2>easyui tree</h2>
  26. <div class="easyui-layout" style="width:1300px;height:550px;">
  27. <div data-options="region:'west',split:true,border:false" title="导航菜单" style="width:200px">
  28. <ul id="myTree" class="easyui-tree"></ul>
  29. </div>
  30. <div data-options="region:'center'">
  31. </div>
  32. </div>
  33. </body>
  34. </html>

mytreeTest.js 
【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP 
  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
【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP

  1. package com.ll.domain;
  2. import java.util.List;
  3. import java.util.Map;
  4. public class TreeNodeInfo {
  5. private String id; //要显示的子节点的ID
  6. private String text; //要显示的子节点的 Text
  7. private String state;
  8. private String iconCls; //节点的图标
  9. private String parentId; //父节点的ID
  10. private List<TreeNodeInfo> children; //孩子节点的List
  11. private boolean checked = false;
  12. // private Map<String, Object> attributes = new HashMap<String, Object>();
  13. private Map<String, Object> attributes;
  14. public TreeNodeInfo() {
  15. super();
  16. }
  17. public TreeNodeInfo(String id, String text, String state, String iconCls,
  18. String parentId, List<TreeNodeInfo> children, boolean checked,
  19. Map<String, Object> attributes) {
  20. super();
  21. this.id = id;
  22. this.text = text;
  23. this.state = state;
  24. this.iconCls = iconCls;
  25. this.parentId = parentId;
  26. this.children = children;
  27. this.checked = checked;
  28. this.attributes = attributes;
  29. }
  30. public String getId() {
  31. return id;
  32. }
  33. public void setId(String id) {
  34. this.id = id;
  35. }
  36. public String getText() {
  37. return text;
  38. }
  39. public void setText(String text) {
  40. this.text = text;
  41. }
  42. public String getState() {
  43. return state;
  44. }
  45. public void setState(String state) {
  46. this.state = state;
  47. }
  48. public String getIconCls() {
  49. return iconCls;
  50. }
  51. public void setIconCls(String iconCls) {
  52. this.iconCls = iconCls;
  53. }
  54. public String getParentId() {
  55. return parentId;
  56. }
  57. public void setParentId(String parentId) {
  58. this.parentId = parentId;
  59. }
  60. public List<TreeNodeInfo> getChildren() {
  61. return children;
  62. }
  63. public void setChildren(List<TreeNodeInfo> children) {
  64. this.children = children;
  65. }
  66. public boolean isChecked() {
  67. return checked;
  68. }
  69. public void setChecked(boolean checked) {
  70. this.checked = checked;
  71. }
  72. public Map<String, Object> getAttributes() {
  73. return attributes;
  74. }
  75. public void setAttributes(Map<String, Object> attributes) {
  76. this.attributes = attributes;
  77. }
  78. }

loadTreeJson.action 
【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP 
  1. package com.ll.web;
  2. import java.util.ArrayList;
  3. import java.util.HashMap;
  4. import java.util.List;
  5. import java.util.Map;
  6. import javax.servlet.http.HttpServletRequest;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.stereotype.Controller;
  9. import org.springframework.ui.ModelMap;
  10. import org.springframework.web.bind.annotation.RequestMapping;
  11. import com.ll.domain.TreeNodeInfo;
  12. import com.ll.domain.User;
  13. import com.ll.service.IUserService;
  14. @Controller
  15. public class LoginController {
  16. @Autowired
  17. private IUserService userService;
  18. @RequestMapping(value = "/index.action")
  19. public String loginPage() {
  20. // return "login";
  21. return "myEasyuiTree";
  22. }
  23. @RequestMapping(value = "/loadTreeJson.action")
  24. public String loadTreeJson(ModelMap mm, String id,String info) {
  25. List<TreeNodeInfo> treeList = new ArrayList<TreeNodeInfo>();
  26. if((id==null) || "".equals(id)){ //首次加载tree节点
  27. //模拟从数据库读数据,并将读出的数据赋值给treelist
  28. for (int i = 0; i < 5; i++) {
  29. TreeNodeInfo e = new TreeNodeInfo();
  30. e.setId(i+"");
  31. e.setText("节点【"+i+"】的内容");
  32. Map<String, Object> attributes = new HashMap<String, Object>();
  33. attributes.put("url", "www.baidu.com");
  34. attributes.put("info", "可以设置许多属性值,这是第"+i+"个节点");
  35. e.setAttributes(attributes);
  36. //模拟子节点的数量-第1个和第3个有子节点,默认closed;
  37. if ((i==1) || (i==3)) {
  38. // 节点状态,'open' 或 'closed',默认是 'open'。
  39. // 当设置为 'closed'时,该节点有子节点,并且将从远程站点加载它们
  40. e.setState("closed");
  41. }
  42. //第2个节点也有子节点,但是默认open
  43. if((i==2)){
  44. List<TreeNodeInfo> node2ChildrenList = new ArrayList<TreeNodeInfo>();
  45. for (int j = 22; j < 25; j++) {
  46. TreeNodeInfo e2 = new TreeNodeInfo();
  47. e2.setId(j + "");
  48. e2.setText("节点【" + j + "】的内容");
  49. Map<String, Object> attributes2 = new HashMap<String, Object>();
  50. attributes2.put("url", "www.baidu.com");
  51. attributes2.put("info", "这是子节点【" + j + "】");
  52. e2.setAttributes(attributes2);
  53. node2ChildrenList.add(e2);
  54. }
  55. e.setChildren(node2ChildrenList);
  56. }
  57. treeList.add(e);
  58. }
  59. }else{ //展开节点
  60. //判断节点的id号
  61. if("1".equals(id)){ //有3个子节点
  62. for (int i = 10; i < 13; i++) {
  63. TreeNodeInfo e = new TreeNodeInfo();
  64. e.setId(i + "");
  65. e.setText("节点【" + i + "】的内容");
  66. Map<String, Object> attributes = new HashMap<String, Object>();
  67. attributes.put("url", "www.baidu.com");
  68. attributes.put("info", "这是子节点【" + i + "】");
  69. e.setAttributes(attributes);
  70. treeList.add(e);
  71. }
  72. }else if ("3".equals(id)) { //有4个子节点
  73. for (int i = 30; i < 34; i++) {
  74. TreeNodeInfo e = new TreeNodeInfo();
  75. e.setId(i + "");
  76. e.setText("节点【" + i + "】的内容");
  77. Map<String, Object> attributes = new HashMap<String, Object>();
  78. attributes.put("url", "www.baidu.com");
  79. attributes.put("info", "这是子节点【" + i + "】");
  80. e.setAttributes(attributes);
  81. treeList.add(e);
  82. }
  83. }
  84. }
  85. mm.addAttribute("treeJson", treeList);
  86. return "treeJsonBean";
  87. }
  88. @RequestMapping(value = "/test.action")
  89. public String test(HttpServletRequest request, LoginCommand loginCommand) {
  90. System.out.println("用户名:" + loginCommand.getUserName() + "--密码:"
  91. + loginCommand.getPassword());
  92. User user = new User();
  93. user.setUserName(loginCommand.getUserName());
  94. user.setPassword(loginCommand.getPassword());
  95. userService.save(user);
  96. request.getSession().setAttribute("user", user);
  97. return "main";
  98. }
  99. }

当首次加载时,tree如下图所示:
【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP
当点击展开【节点1】和【节点3】时,如下图所示:
【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP
当点击tree节点时,会弹出:
【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP

4. 其他



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

spring mvc配置:
【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP【EasyUI学习-2】Easyui Tree的异步加载-LMLPHP
  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" />
  14. <mvc:annotation-driven />
  15. <!-- 配置视图解析器,将ModelAndView及字符串解析为具体的页面 -->
  16. <bean
  17. class="org.springframework.web.servlet.view.InternalResourceViewResolver"
  18. p:viewClass="org.springframework.web.servlet.view.JstlView" p:prefix="/jsp/"
  19. p:suffix=".jsp" />
  20. <!-- bean 视图解析器 -->
  21. <bean class="org.springframework.web.servlet.view.BeanNameViewResolver"
  22. p:order="10" />
  23. <!-- 返回tree-json 状态 -->
  24. <bean id="treeJsonBean"
  25. class="org.springframework.web.servlet.view.json.MappingJacksonJsonView">
  26. <property name="renderedAttributes">
  27. <set>
  28. <value>treeJson</value>
  29. </set>
  30. </property>
  31. </bean>
  32. </beans>

附件列表

05-02 08:40