easyUI 實現非同步tree
html:
<ul id="relInfoTree" class="easyui-tree"></ul>
js:
$(document).ready(function() {
loadRelTree();
});
function loadRelTree(){
$('#relInfoTree').tree({
// checkbox: true,
animate:true,
lines:true,
url: '/CrocodileSecret/system/cisweb/loadRelTree?id=0',//這是第一次載入樹的url 載入根節點
loadFilter:function(data){
return data.treeJson;
},
onBeforeExpand:function(node){
$("#relInfoTree").tree('options').url='/CrocodileSecret/system/cisweb/loadRelTree?id='+node.id;//這是點選父節點的時候傳送請求去載入子節點
}
});
}
java:
-EasyuiTreeNode.java
private Integer id;//: 唯一標示;
private String text;//: 顯示的文字;
private List<EasyuiTreeNode> children;//:子節點;
private String state;//:closed或open,表示節點是展開還是摺疊;
private String iconCls="icon-blank";//空白圖示,可選
getter...setter...
-Controller
@RequestMapping(value = "/loadRelTree", method = RequestMethod.POST)
@ResponseBody
public JSONObject loadRelTree(Integer id,@RequestParam(value = "orgid", required = false) Integer orgid,HttpServletRequest request, HttpServletResponse response) {
JSONObject json = new JSONObject();
json = cisWebApp.loadRelTree(id);
return json;
}
-service
public JSONObject loadRelTree(Integer id, Integer orgId) {
JSONObject object = new JSONObject();
List<EasyuiTreeNode> list=new ArrayList<EasyuiTreeNode>();
if(id==null || id==0) {
EasyuiTreeNode node=new EasyuiTreeNode();
CisOrg cisOrg=cisComp.getOrgById(orgId);
node.setId(cisOrg.getOwnerUserId());
node.setText(cisOrg.getOrgName());
node.setState("open");
node.setChildren(cisComp.getSublist(cisOrg.getOwnerUserId()));//start 初始顯示一級
if(node.getChildren().size()>0) {
node.getChildren().stream().forEach(subNode->{
subNode.setState(crmComponent.selIsClose(subNode.getId())>0 ? "closed":"open");
});//end 如果只顯示根節點,不用這段
}
list.add(node);
}else {//非同步載入
list=cisComp.getSublist(id);
if(list.size()>0) {
list.stream().forEach(node->{
node.setState(crmComponent.selIsClose(node.getId())>0 ? "closed":"open");
});
}
}
object.put("treeJson", list);
object.put("status", "succeed");
return object;
}