EasyUI实现异步加载树节点示例
前端
url="get_tree_data.json" data-options="lines:true,method:'GET'">
或
$("#treeid").tree({
url:"get_tree_data.json",
method:'GET'
lines:true,
...
});
后端(Java Spring MVC)
@ResponseBody
@RequestMapping(value="get_tree_data.json", method=GET)
public List> getTreeData(@RequestParam Integer id) {
//
List deparments = getChildrenDepartments(id);
return convertDepartmentsToTree(departments);
}
public List> convertDepartmentsToTree(List departments) {
notNull(departments);
List trees = new ArrayList<>(departments.size());
departments.forEach(department -> {
Tree tree = new Tree();
tree.setId(department .getId())
tree.setText(deparment.getName())
tree.setArributes(new DepartmentAttrs(department));
// ...
if(department.hasChildren()) {
tree.setState("closed); //在前端显示为可以展开的节点,展开后会请求后端加载它的子节点
} else{
tree.setState("open"); //在前端显示为叶子节点
}
});
}
public class Tree {
private Integer id;
private String text;
private String iconCls;
private T attributes;
private String state;
private List children;
private boolean checked;
.....getter and setter
}
EasyUI实现异步动态树节点加载,构建树有几个要求:
返回的树节点必须有id属性
后端接口必须要id作为参数,接收父节点id,返回子节点列表
如果返回的节点是叶子节点,把state值设为"open",如果还有下级节点,则把state设为"closed"
返回的json结构:
[{
"id": 1,
"text": "Node 1",
"state": "closed",
"children": [{
"id": 11,
"text": "Node 11"
},{
"id": 12,
"text": "Node 12"
}]
},{
"id": 2,
"text": "Node 2",
"state": "closed"
}]
id: 节点id
text:节点显示的文字
state: 值为'open' 或者 'closed', 默认为'open'。当值为'closed', 在异步加载中,节点显示为一个可以展开的节点
checked: 标记节点是否可以勾选
attributes: 自定义属性
children: 子节点