在一些項目中，尤其是背景管理的頁面，常常遇到需要用樹結構來清晰的表示資料結構的問題，最近在敲項目時了解了使用easyui來生成動态的樹，十分簡單。
easyui架構中已經對樹結構進行了定義，你隻要按照它的結構定義這麼一個類，定義一些必須的屬性即可，就可以直接生成相應的樹結構。
在架構中定義的樹的結點屬性有
- id：節點ID,可以作為參數來異步向頁面位址擷取子節點資料
- text：節點文本
- state：節點狀态。取值為open(預設預設值)或close。當設定為close時,會自動異步擷取子節點的資料
- checked：指明節點是否被選中。
- attributes：自定義屬性
- children：以數組的形式包含子節點
用eclipse建立一個web項目，我用的是springmvc架構，别的應該也可以，配置一些基本的配置資訊後，咱們寫一個TreeNode的類
TreeNode.java
package com.tree.pojo;
import java.util.List;
public class TreeNode {
private int id;
private String text;
private List<TreeNode> children;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public List<TreeNode> getChildren() {
return children;
}
public void setChildren(List<TreeNode> children) {
this.children = children;
}
}
控制層的代碼：
package com.tree.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.tree.pojo.TreeNode;
@Controller
@RequestMapping("controller")
public class GetTree {
@RequestMapping(value = "getTree")
@ResponseBody
public List<TreeNode> getTree() {
System.out.println("fuck");
TreeNode treeNode1 = new TreeNode();
treeNode1.setId(1);
treeNode1.setText("學生");
TreeNode treeNode2 = new TreeNode();
treeNode2.setId(2);
treeNode2.setText("國小");
treeNode2.setChildren(null);
TreeNode treeNode3 = new TreeNode();
treeNode3.setId(3);
treeNode3.setText("國中");
TreeNode treeNode4 = new TreeNode();
treeNode4.setId(4);
treeNode4.setText("高中");
treeNode4.setChildren(null);
TreeNode treeNode5 = new TreeNode();
treeNode5.setId(5);
treeNode5.setText("初一");
treeNode5.setChildren(null);
TreeNode treeNode6 = new TreeNode();
treeNode6.setId(6);
treeNode6.setText("初二");
treeNode6.setChildren(null);
TreeNode treeNode7 = new TreeNode();
treeNode7.setId(7);
treeNode7.setText("初三");
treeNode7.setChildren(null);
//學生的子節點
List<TreeNode> list1 = new ArrayList<TreeNode>();
list1.add(treeNode2);
list1.add(treeNode3);
list1.add(treeNode4);
treeNode1.setChildren(list1);
//國中的子節點
List<TreeNode> list2 = new ArrayList<TreeNode>();
list2.add(treeNode5);
list2.add(treeNode6);
list2.add(treeNode7);
treeNode3.setChildren(list2);
//傳回最後的整個結構
List<TreeNode> tree = new ArrayList<TreeNode>();
tree.add(treeNode1);
return tree;
}
}
前端代碼：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<link href="EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
<link href="EasyUI/themes/icon.css" rel="stylesheet" type="text/css"/>
<link href="EasyUI/demo.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="EasyUI/jquery.min.js"></script>
<script type="text/javascript" src="EasyUI/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script>
</head>
<body>
<div style="width: 180px;height:300px">
<ul id="tt" class="easyui-tree"></ul>
</div>
<script type="text/javascript">
$('#tt').tree({
//url : 'controller/getTree'
url : 'controller/getTree'
});
</script>
</body>
</html>
目錄結構：
除了架構必要的包，還引入了兩個json的包，主要是将背景傳來的資料以json格式傳回到前台
用jackson也可以。
最後的效果如圖：