目录
前言
本章给大家讲解的是Easyui的tree树组件的使用以及后台实现。
Tree树组件与案例演示
效果：
数据库设计：
使用的数据：
- 其中的字段是根据要生成的树节点的属性定义的。
- id：节点ID
- name：显示节点本文
- ismenu：是否为一个节点
需要导入的包：
导入的js：
html代码：
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
<ul id="tt"></ul>
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:'center',title:'Center'"></div>
</body>js代码：
$(function(){
$('#tt').tree({
url:'tree_data1.json'
});
})实体类：
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;
}
@Override
public String toString() {
return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid="
+ pid + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
}
}dao方法：
public class PermissionDao extends BaseDao<Permission> {
public List<Permission> list(Permission permission,PageBean pagebean) throws InstantiationException, IllegalAccessException, SQLException{
String sql="select * from t_easyui_Permission";
return super.executeQuery(sql, Permission.class, pagebean);
}
}测试：
public static void main(String[] args) throws InstantiationException, IllegalAccessException, SQLException, JsonProcessingException {
PermissionDao permissiondao=new PermissionDao();
List<Permission>list= permissiondao.list(null, null);
//通过工具类完成指定格式的输出
List<TreeVo<Permission>> nodes = new ArrayList<TreeVo<Permission>>();
//permission的格式是不满足easyui的tree组件时展示的数据格式的
//目的：将List<Permission>转成List<TreeVo<T>
//实现：List<Permission>遍地得到的单个permission转成TreeVo，将TreeVo加入到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 jonstr = om.writeValueAsString(parent);
System.out.println(jonstr);
}本期就讲解到这，如果小伙伴有需要补充的，欢迎在评论区留言！