zoukankan      html  css  js  c++  java

  • 【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>




    附件列表
    • 相关阅读:
      kvm
      Javascript 笔记与总结（2-7）对象
      [Swift]LeetCode172. 阶乘后的零 | Factorial Trailing Zeroes
      Swift5.3 语言指南(五) 基本运算符
      C#6.0语言规范(一) 介绍
      [Swift]LeetCode171. Excel表列序号 | Excel Sheet Column Number
      [Swift]LeetCode169. 求众数 | Majority Element
      [Swift]LeetCode168. Excel表列名称 | Excel Sheet Column Title
      [Swift]LeetCode167. 两数之和 II
      [Java]LeetCode141. 环形链表 | Linked List Cycle
    • 原文地址：https://www.cnblogs.com/ssslinppp/p/4568196.html
    Copyright © 2011-2022 走看看