EasyUi2
前言
今天我们来学习 EasyUi 中的 Tree(树);
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
普通我们写一个树形结构的功能需要这样写 一层一层套进去 代码多还杂
树控件也可以定义在一个空
-
元素中并使用Javascript加载数据。
只需要 在页面上写上 再引用就行
<script type="text/javascript"
src="${pageContext.request.contextPath }/static/js/index.js"></script>
<ul id="tt"></ul>
在写一个json文件
在js里面写个index.js文件调用就行
tree后台实现
我们的目标是
先写一个案例测试下
TreeVOone 实体类
package com.zhuchenxi.vo;
import java.util.ArrayList;
import java.util.List;
public class TreeVOone {
private String id;
private String text;
private List<TreeVOone> children = new ArrayList<TreeVOone>();
private String pid;
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 List<TreeVOone> getChildren() {
return children;
}
public void setChildren(List<TreeVOone> children) {
this.children = children;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
public TreeVOone(String id, String text, List<TreeVOone> children, String pid) {
super();
this.id = id;
this.text = text;
this.children = children;
this.pid = pid;
}
@Override
public String toString() {
return "TreeVOone [id=" + id + ", text=" + text + ", children=" + children + ", pid=" + pid + "]";
}
public TreeVOone() {
// TODO Auto-generated constructor stub
}
public TreeVOone(String id, String text, String pid) {
super();
this.id = id;
this.text = text;
this.pid = pid;
}
}
TreeVOText
package com.zhuchenxi.vo;
import java.util.List;
import org.junit.Test;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
public class TreeVOText {
@Test
public void test() throws JsonProcessingException {
TreeVOone o = new TreeVOone("1","my documents","-1");
TreeVOone o1 = new TreeVOone("11","photos","1");
TreeVOone o2 = new TreeVOone("12","program files","1");
TreeVOone o3 = new TreeVOone("13","index.html","1");
TreeVOone o4 = new TreeVOone("14","about.html","1");
TreeVOone o5 = new TreeVOone("15","welcome.html","1");
List<TreeVOone> parent = o.getChildren();
parent.add(o1);
parent.add(o2);
parent.add(o3);
parent.add(o4);
parent.add(o5);
ObjectMapper om = new ObjectMapper();
String jsonStr = om.writeValueAsString(o);
System.out.println(jsonStr);
}
}
输出出来是这样的
{"id":"1","text":"my documents","children":[{"id":"11","text":"photos","children":[],"pid":"1"},{"id":"12","text":"program files","children":[],"pid":"1"},{"id":"13","text":"index.html","children":[],"pid":"1"},{"id":"14","text":"about.html","children":[],"pid":"1"},{"id":"15","text":"welcome.html","children":[],"pid":"1"}],"pid":"-1"}
这样不好辨认 我们去
解析下得到
解析表 t_easyui_Permission
这是数据库的样子
先用一个写好的助手类 TreeVo
每个节点都具备以下属性:
id:节点ID,对加载远程数据很重要。
text:显示节点文本。
state:节点状态,‘open’ 或 ‘closed’,默认:‘open’。如果为’closed’的时候,将不自动展开该节点。
checked:表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。
package com.zhuchenxi.vo;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
public class TreeVo<T> {
/**
* 节点ID
*/
private String id;
/**
* 显示节点文本
*/
private String text;
/**
* 节点状态,open closed
*/
private Map<String, Object> state;
/**
* 节点是否被选中 true false
*/
private boolean checked = false;
/**
* 节点属性
*/
private Map<String, Object> attributes;
/**
* 节点的子节点
*/
private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();
/**
* 父ID
*/
private String parentId;
/**
* 是否有父节点
*/
private boolean hasParent = false;
/**
* 是否有子节点
*/
private boolean hasChildren = false;
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 Map<String, Object> getState() {
return state;
}
public void setState(Map<String, Object> state) {
this.state = state;
}
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;
}
public List<TreeVo<T>> getChildren() {
return children;
}
public void setChildren(List<TreeVo<T>> children) {
this.children = children;
}
public boolean isHasParent() {
return hasParent;
}
public void setHasParent(boolean isParent) {
this.hasParent = isParent;
}
public boolean isHasChildren() {
return hasChildren;
}
public void setChildren(boolean isChildren) {
this.hasChildren = isChildren;
}
public String getParentId() {
return parentId;
}
public void setParentId(String parentId) {
this.parentId = parentId;
}
public TreeVo(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
super();
this.id = id;
this.text = text;
this.state = state;
this.checked = checked;
this.attributes = attributes;
this.children = children;
this.hasParent = isParent;
this.hasChildren = isChildren;
this.parentId = parentID;
}
public TreeVo() {
super();
}
}
实体类 Permission 要和数据库一样
package com.zhuchenxi.entity;
public class Permission {
private long id;
private String name;
private String description;
private String url;
private long pid;
private int ismenu;
private long displayno;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public long getPid() {
return pid;
}
public void setPid(long pid) {
this.pid = pid;
}
public int getIsmenu() {
return ismenu;
}
public void setIsmenu(int ismenu) {
this.ismenu = ismenu;
}
public long getDisplayno() {
return displayno;
}
public void setDisplayno(long displayno) {
this.displayno = displayno;
}
public Permission(long id, String name, String description, String url, long pid, int ismenu, long displayno) {
super();
this.id = id;
this.name = name;
this.description = description;
this.url = url;
this.pid = pid;
this.ismenu = ismenu;
this.displayno = displayno;
}
@Override
public String toString() {
return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid="
+ pid + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
}
public Permission() {
// TODO Auto-generated constructor stub
}
}
导入我们的助手类和包 然后继承BaseDao 写个方法测试下
package com.zhuchenxi.dao;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.zhuchenxi.entity.Permission;
import com.zhuchenxi.util.BaseDao;
import com.zhuchenxi.util.BuildTree;
import com.zhuchenxi.util.PageBean;
import com.zhuchenxi.vo.TreeVo;
public class PermissionDao extends BaseDao<Permission> {
public List<Permission> list(Permission permission,PageBean pageBean) throws Exception {
String sql="select * from t_easyui_Permission";
return super.executeQuery(sql, Permission.class, pageBean);
}
public static void main(String[] args) throws Exception {
PermissionDao pd = new PermissionDao();
List<Permission> list = pd.list(null, null);
// 通过工具类完成指定格式的输出
List<TreeVo<Permission>> nodes = new ArrayList<TreeVo<Permission>>();
// Permission的格式不满足easyui的tree组件的展现的数据格式的
// 将List<Permission>转换成<TreeVo<T>>
// 实现,将List<Permission>得到的单个permission转成TreeVo,将Treev加入到nodes
TreeVo treeVo = null;
for (Permission p : list) {
treeVo = new TreeVo<>();
treeVo.setId(p.getId()+"");
treeVo.setText(p.getName());
treeVo.setParentId(p.getPid()+"");
// Map<String, Object> attributes = new HashMap<String, Object>();
// attributes.put("self", p);
// treeVo.setAttributes(attributes);
nodes.add(treeVo);
}
TreeVo<Permission> parent = BuildTree.build(nodes);
ObjectMapper om = new ObjectMapper();
String jsonstr = om.writeValueAsString(parent);
System.out.println(jsonstr);
}
}
输出是这样也得转一下
{"id":"000","text":"椤剁骇鑺傜偣","state":{"opened":true},"checked":true,"attributes":null,"children":[{"id":"1","text":"书籍管理","state":null,"checked":false,"attributes":null,"children":[{"id":"2","text":"新增(crud)","state":null,"checked":false,"attributes":null,"children":[],"parentId":"1","hasParent":true,"hasChildren":false},{"id":"3","text":"未上架","state":null,"checked":false,"attributes":null,"children":[],"parentId":"1","hasParent":true,"hasChildren":false},{"id":"4","text":"已上架","state":null,"checked":false,"attributes":null,"children":[],"parentId":"1","hasParent":true,"hasChildren":false},{"id":"5","text":"已下架","state":null,"checked":false,"attributes":null,"children":[],"parentId":"1","hasParent":true,"hasChildren":false}],"parentId":"0","hasParent":false,"hasChildren":true},{"id":"6","text":"订单管理","state":null,"checked":false,"attributes":null,"children":[{"id":"7","text":"未发货","state":null,"checked":false,"attributes":null,"children":[],"parentId":"6","hasParent":true,"hasChildren":false},{"id":"8","text":"已发货","state":null,"checked":false,"attributes":null,"children":[],"parentId":"6","hasParent":true,"hasChildren":false},{"id":"9","text":"已签收","state":null,"checked":false,"attributes":null,"children":[],"parentId":"6","hasParent":true,"hasChildren":false},{"id":"14","text":"订单项","state":null,"checked":false,"attributes":null,"children":[],"parentId":"6","hasParent":true,"hasChildren":false}],"parentId":"0","hasParent":false,"hasChildren":true},{"id":"10","text":"订单管理","state":null,"checked":false,"attributes":null,"children":[{"id":"11","text":"未发货","state":null,"checked":false,"attributes":null,"children":[],"parentId":"10","hasParent":true,"hasChildren":false},{"id":"12","text":"已发货","state":null,"checked":false,"attributes":null,"children":[],"parentId":"10","hasParent":true,"hasChildren":false},{"id":"13","text":"已签收","state":null,"checked":false,"attributes":null,"children":[],"parentId":"10","hasParent":true,"hasChildren":false}],"parentId":"0","hasParent":false,"hasChildren":true}],"parentId":"-1","hasParent":false,"hasChildren":true}
转出来
{
"id": "000",
"text": "椤剁骇鑺傜偣",
"state": {
"opened": true
},
"checked": true,
"attributes": null,
"children": [{
"id": "1",
"text": "书籍管理",
"state": null,
"checked": false,
"attributes": null,
"children": [{
"id": "2",
"text": "新增(crud)",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "1",
"hasParent": true,
"hasChildren": false
}, {
"id": "3",
"text": "未上架",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "1",
"hasParent": true,
"hasChildren": false
}, {
"id": "4",
"text": "已上架",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "1",
"hasParent": true,
"hasChildren": false
}, {
"id": "5",
"text": "已下架",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "1",
"hasParent": true,
"hasChildren": false
}],
"parentId": "0",
"hasParent": false,
"hasChildren": true
}, {
"id": "6",
"text": "订单管理",
"state": null,
"checked": false,
"attributes": null,
"children": [{
"id": "7",
"text": "未发货",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "6",
"hasParent": true,
"hasChildren": false
}, {
"id": "8",
"text": "已发货",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "6",
"hasParent": true,
"hasChildren": false
}, {
"id": "9",
"text": "已签收",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "6",
"hasParent": true,
"hasChildren": false
}, {
"id": "14",
"text": "订单项",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "6",
"hasParent": true,
"hasChildren": false
}],
"parentId": "0",
"hasParent": false,
"hasChildren": true
}, {
"id": "10",
"text": "订单管理",
"state": null,
"checked": false,
"attributes": null,
"children": [{
"id": "11",
"text": "未发货",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "10",
"hasParent": true,
"hasChildren": false
}, {
"id": "12",
"text": "已发货",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "10",
"hasParent": true,
"hasChildren": false
}, {
"id": "13",
"text": "已签收",
"state": null,
"checked": false,
"attributes": null,
"children": [],
"parentId": "10",
"hasParent": true,
"hasChildren": false
}],
"parentId": "0",
"hasParent": false,
"hasChildren": true
}],
"parentId": "-1",
"hasParent": false,
"hasChildren": true
}
是不是很接近了 今天的分想就到這了