在一些项目中,尤其是后台管理的页面,常常遇到需要用树结构来清晰的表示数据结构的问题,最近在敲项目时了解了使用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也可以。
最后的效果如图: