作者：ssslinppp
1. 摘要
easyui相關的介紹可以上其官網或者百度去搜索，這里不做介紹。
Easyui Tree的使用，官網或者easyui中文網站，也有相關介紹，但是官方提供的實例所使用的json是寫死的，不是后台實時讀取的。在實際的項目中，要顯示的tree數據，一般都是從數據庫中讀取，然后通過通過ajax或者其他技術將tree的json數據發送到前台，然后顯示。
本文將介紹easyui tree的異步加載，以及手動展開tree。
2. tree的相關介紹
上圖是一個tree，它對應json數據格式為：
[{ "id":1, "text":"My Documents", "children":[{ "id":11, "text":"Photos", "state":"closed", "children":[{ "id":111, "text":"Friend" },{ "id":112, "text":"Wife" },{ "id":113, "text":"Company" }] },{ "id":12, "text":"Program Files", "children":[{ "id":121, "text":"Intel" },{ "id":122, "text":"Java", "attributes":{ "p1":"Custom Attribute1", "p2":"Custom Attribute2" } },{ "id":123, "text":"Microsoft Office" },{ "id":124, "text":"Games", "checked":true }] },{ "id":13, "text":"index.html" },{ "id":14, "text":"about.html" },{ "id":15, "text":"welcome.html" }]}]
從上面的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界面：
<%@ page language="java" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; response.setHeader("Pragma", "no-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0);%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>測試系統</title><script type="text/javascript">var basePath = "<%=basePath%>";</script><link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="<%=basePath%>js/easyui/demo.css"><script type="text/javascript" src="<%=basePath%>js/easyui/jquery.min.js"></script><script type="text/javascript" src="<%=basePath%>js/easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="<%=basePath%>js/mytreeTest.js"></script></head><body> <h2>easyui tree</h2> <div class="easyui-layout" style="width:1300px;height:550px;"> <div data-options="region:'west',split:true,border:false" title="導航菜單" style="width:200px"> <ul id="myTree" class="easyui-tree"></ul> </div> <div data-options="region:'center'"> </div> </div></body></html>
mytreeTest.js
$(function() { $('#myTree').tree({ // checkbox: true, animate : true, lines : true, url : basePath + "loadTreeJson.action", //默認會將節點的id傳遞到后台 loadFilter : function(data) { //必須有這個函數，否則出不來，不知道為什么 return data.treeJson; }, onClick : function(node) { alert("自己添加的屬性： 【URL】"+node.attributes.url+", 【info】"+node.attributes.info); } });});
3.3 后台代碼
我們采用了spring mvc。
為了實現tree的json格式數據的返回，我們在后台定義了一個類：
TreeNodeInfo.java
package com.ll.domain;import java.util.List;import java.util.Map;public class TreeNodeInfo { private String id; //要顯示的子節點的ID private String text; //要顯示的子節點的 Text private String state; private String iconCls; //節點的圖標 private String parentId; //父節點的ID private List<TreeNodeInfo> children; //孩子節點的List private boolean checked = false;// private Map<String, Object> attributes = new HashMap<String, Object>(); private Map<String, Object> attributes; public TreeNodeInfo() { super(); } public TreeNodeInfo(String id, String text, String state, String iconCls, String parentId, List<TreeNodeInfo> children, boolean checked, Map<String, Object> attributes) { super(); this.id = id; this.text = text; this.state = state; this.iconCls = iconCls; this.parentId = parentId; this.children = children; this.checked = checked; this.attributes = attributes; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getText() { return text; } public void setText(String text) { this.text = text; } public String getState() { return state; } public void setState(String state) { this.state = state; } public String getIconCls() { return iconCls; } public void setIconCls(String iconCls) { this.iconCls = iconCls; } public String getParentId() { return parentId; } public void setParentId(String parentId) { this.parentId = parentId; } public List<TreeNodeInfo> getChildren() { return children; } public void setChildren(List<TreeNodeInfo> children) { this.children = children; } public boolean isChecked() { return checked; } public void setChecked(boolean checked) { this.checked = checked; } public Map<String, Object> getAttributes() { return attributes; } public void setAttributes(Map<String, Object> attributes) { this.attributes = attributes; }}
loadTreeJson.action
package com.ll.web;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import javax.servlet.http.HttpServletRequest;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.RequestMapping;import com.ll.domain.TreeNodeInfo;import com.ll.domain.User;import com.ll.service.IUserService;@Controllerpublic class LoginController { @Autowired private IUserService userService; @RequestMapping(value = "/index.action") public String loginPage() {// return "login"; return "myEasyuiTree"; } @RequestMapping(value = "/loadTreeJson.action") public String loadTreeJson(ModelMap mm, String id,String info) { List<TreeNodeInfo> treeList = new ArrayList<TreeNodeInfo>(); if((id==null) || "".equals(id)){ //首次加載tree節點 //模擬從數據庫讀數據，並將讀出的數據賦值給treelist for (int i = 0; i < 5; i++) { TreeNodeInfo e = new TreeNodeInfo(); e.setId(i+""); e.setText("節點【"+i+"】的內容"); Map<String, Object> attributes = new HashMap<String, Object>(); attributes.put("url", "www.baidu.com"); attributes.put("info", "可以設置許多屬性值，這是第"+i+"個節點"); e.setAttributes(attributes); //模擬子節點的數量-第1個和第3個有子節點，默認closed； if ((i==1) || (i==3)) { // 節點狀態，'open' 或 'closed'，默認是 'open'。 // 當設置為 'closed'時，該節點有子節點，並且將從遠程站點加載它們 e.setState("closed"); } //第2個節點也有子節點，但是默認open if((i==2)){ List<TreeNodeInfo> node2ChildrenList = new ArrayList<TreeNodeInfo>(); for (int j = 22; j < 25; j++) { TreeNodeInfo e2 = new TreeNodeInfo(); e2.setId(j + ""); e2.setText("節點【" + j + "】的內容"); Map<String, Object> attributes2 = new HashMap<String, Object>(); attributes2.put("url", "www.baidu.com"); attributes2.put("info", "這是子節點【" + j + "】"); e2.setAttributes(attributes2); node2ChildrenList.add(e2); } e.setChildren(node2ChildrenList); } treeList.add(e); } }else{ //展開節點 //判斷節點的id號 if("1".equals(id)){ //有3個子節點 for (int i = 10; i < 13; i++) { TreeNodeInfo e = new TreeNodeInfo(); e.setId(i + ""); e.setText("節點【" + i + "】的內容"); Map<String, Object> attributes = new HashMap<String, Object>(); attributes.put("url", "www.baidu.com"); attributes.put("info", "這是子節點【" + i + "】"); e.setAttributes(attributes); treeList.add(e); } }else if ("3".equals(id)) { //有4個子節點 for (int i = 30; i < 34; i++) { TreeNodeInfo e = new TreeNodeInfo(); e.setId(i + ""); e.setText("節點【" + i + "】的內容"); Map<String, Object> attributes = new HashMap<String, Object>(); attributes.put("url", "www.baidu.com"); attributes.put("info", "這是子節點【" + i + "】"); e.setAttributes(attributes); treeList.add(e); } } } mm.addAttribute("treeJson", treeList); return "treeJsonBean"; } @RequestMapping(value = "/test.action") public String test(HttpServletRequest request, LoginCommand loginCommand) { System.out.println("用戶名：" + loginCommand.getUserName() + "--密碼：" + loginCommand.getPassword()); User user = new User(); user.setUserName(loginCommand.getUserName()); user.setPassword(loginCommand.getPassword()); userService.save(user); request.getSession().setAttribute("user", user); return "main"; }}
當首次加載時，tree如下圖所示：
當點擊展開【節點1】和【節點3】時，如下圖所示：
當點擊tree節點時，會彈出：
spring mvc配置：
<?xml version="1.0" encoding="UTF-8" ?><beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd"> <!-- 掃描web包，應用Spring的注解 --> <context:component-scan base-package="com.ll.web" /> <mvc:annotation-driven /> <!-- 配置視圖解析器，將ModelAndView及字符串解析為具體的頁面 --> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" p:viewClass="org.springframework.web.servlet.view.JstlView" p:prefix="/jsp/" p:suffix=".jsp" /> <!-- bean 視圖解析器 --> <bean class="org.springframework.web.servlet.view.BeanNameViewResolver" p:order="10" /> <!-- 返回tree-json 狀態 --> <bean id="treeJsonBean" class="org.springframework.web.servlet.view.json.MappingJacksonJsonView"> <property name="renderedAttributes"> <set> <value>treeJson</value> </set> </property> </bean></beans>
附件列表