樹形節點非同步載入
阿新 • • 發佈:2018-12-31
一,準備樹形實體。
二,組裝資料,注意一定要將父級節點的state在後端返回資料時關閉,要不在介面不會出現,可選的子節點。
三,前端處理
一,
import java.util.TreeSet; import com.fasterxml.jackson.annotation.JsonIgnore; import lombok.Data; import lombok.Setter; import lombok.AccessLevel; /** * 樹實體,此樹結構符合easyui 的tree結構 * * */ @Data public class TreeEntity implements Comparable<TreeEntity> { /** * 節點收縮狀態標識 */ public static final String STATE_CLOSED = "closed"; /** * 節點展開狀態標識 */ public static final String STATE_OPEN = "open"; /** * 空圖示的樣式 */ public static final String NULL_ICON="icon-blank"; /** * 資料夾圖示標式 */ public static final String FOLDER_ICON="tree-folder"; /** * 節點id */ private String id; /** * 節點顯示文字 */ private String text; /** * 節點顯示的圖示 */ private String iconCls; /** * 是否勾選 */ private boolean checked; /** * 節點預設狀態(open、closed) */ private String state; /* * 父節點標識值 */ private String parentId; /** * 排序值 */ private int sort; /* * 是否已載入(用於子節點的延時載入) */ @JsonIgnore private boolean isLoad; /** * 節點自定義屬性 */ private Object attributes; /** * 子節點集 */ @Setter(AccessLevel.PROTECTED) private TreeSet<TreeEntity> children; public TreeEntity() { children=new TreeSet<TreeEntity>(); } /** * 構造節點 * @param sId * @param sText * @param sParentId * @param iSort * @param sIcon 節點圖示樣式定義(null表示預設圖示,""表示使用空圖示) */ public TreeEntity(String sId,String sText,String sParentId,int iSort,String sIcon) { this(); id=sId; text=sText; parentId=sParentId; sort=iSort; if(sIcon!=null){ if(sIcon.isEmpty()) sIcon=NULL_ICON; iconCls=sIcon; } } @Override public int compareTo(TreeEntity o) { if(o==null) return 1; if(this==o) return 0;//如果是同一物件,返回0(用於移除) //注意:不能返回0,因為在TreeSet排序時,如果比較是0值時,會認為是在同一個位置放置元素(將會覆蓋原來的元素) if(this.sort==o.sort){//如果排序值相同,再比較標題 String stext=this.text; if(stext==null)stext=""; int ir=stext.compareTo(o.text); if(ir==0){ stext=this.id; if(stext==null)stext=""; ir=stext.compareTo(o.id); } return ir==0?1:ir;//仍相等,返回大於 } return (this.sort<o.sort)?-1:1; } }
二,
public TreeEntity buildAdministrativeTree(AdministrativeDivisionEntity info) { TreeEntity root = new TreeEntity(); root.setId(info.getCode()); root.setText(info.getLname()); root.setIconCls("icon-blank"); if(info.getCode().length()<=4){ root.setState("closed"); } List<AdministrativeDivisionEntity> list = info.getChildren(); if(list!=null&&list.size()>0){ for(AdministrativeDivisionEntity data : list){ root.getChildren().add(buildAdministrativeTree(data)); } } return root; }
三,
1,jsp:
<input id="deptDistrict" class="easyui-combotree" style="width: 100%;"
data-options="editable:true"/>
2,js:
//Ajax請求,返回的內容將根據請求頭MIME 資訊來判斷。 //url:請求地址 //data:請求資料內容 //prop:請求引數,包含屬性 // msg,操作描述,一般在不需要自己處理返回結果的情況下,能友好提示使用者的資訊(不設定或空,預設為“操作”) // sFn,執行成功後的回撥方法(引數為伺服器返回結果),不設定或空,預設為顯示操作成功提示 // fFn,執行失敗後的回撥方法(引數1為請求物件,引數2為提示資訊,引數3為異常資訊),不設定或空,預設為顯示操作失敗提示 // async,是否非同步呼叫請求,預設為true(即非同步呼叫) // method,請求方法,預設為POST // jsonObj,是否將資料以json串傳送請求(會使用invokeJsonObj方法傳送請求) function invokeJson(url,data,prop){ if(!prop) prop = {}; if(prop.jsonObj){invokeJsonObj(url,data,prop); return;} if(!prop.msg) prop.msg = '操作'; if(!prop.sFn) {prop.sFn = function(data){showSuccess(prop.msg+'成功');}};//成功的方法 if(!prop.fFn) {prop.fFn = function(xhr,data,ex){showError(prop.msg+'失敗:'+analyseError(xhr.responseText));}}//失敗的方法 if(typeof(prop.async)=="undefined" || prop.async==null) prop.async = true; if(!prop.method) prop.method="POST"; else if(prop.method.toUpperCase()=="GET"){ url=tagGetRequest(url); } $.ajax({ url: url, type:prop.method, async : prop.async, data:data, success: prop.sFn, error: prop.fFn }); }
$(function(){
var t1=$('#deptDistrict').combotree('tree');
loadTree(t1);
addTreeChildren(t1);
});
function addTreeChildren(tree){
tree.tree({
onBeforeExpand: function (node) {
// 展開節點搜尋子節點,並新增到樹結構裡
if (node.children.length > 0 || node.id == 'notDefinition') {
return;
}
var id = node.id;
invokeJson("/mainWeb/mystestChildren", { code: id }, {
method:"GET",
async: false,
sFn: function (data, textStatus) {
tree.tree('append', {
parent: node.target,
data: data
});
$(node.target).next().css("display", "block");
}, fFn: function (data) {
layer.msg("查詢失敗");
}
});
}
});
}
function loadTree(t){
var url='/mainWeb/mytest';
invokeJson(url, null, {
method:"GET",
sFn: function (data) {
t.tree({
data: data,
onLoadSuccess: function () { //預設摺疊所有節點
t.tree("collapseAll");
}
});
}
});
}