easyui异步加载 java_EasyUI异步动态加载树节点

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: 子节点