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

作者:ssslinppp      

  • 2. tree的相关介绍

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

  • 3.1 功能说明:

  • 3.2 前台代码

  • 3.3 后台代码

  • 4. 其他


  • 1. 摘要



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

    2. tree的相关介绍



    【EasyUI学习-2】Easyui 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 功能说明:

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

    3.2 前台代码

    jsp界面:
    【EasyUI学习-2】Easyui Tree的异步加载
    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的异步加载 
    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的异步加载

    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的异步加载【EasyUI学习-2】Easyui Tree的异步加载【EasyUI学习-2】Easyui Tree的异步加载【EasyUI学习-2】Easyui Tree的异步加载 
    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的异步加载
    当点击展开【节点1】和【节点3】时,如下图所示:
    【EasyUI学习-2】Easyui Tree的异步加载
    当点击tree节点时,会弹出:
    【EasyUI学习-2】Easyui Tree的异步加载

    4. 其他



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


    spring mvc配置:
    【EasyUI学习-2】Easyui Tree的异步加载【EasyUI学习-2】Easyui Tree的异步加载
    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>

    附件列表

    上一篇:Codeforces gym101755F Tree Restoration(拓扑排序)


    下一篇:生成SQL Server数据字典