一,準備樹形實體。
二,組裝資料,注意一定要将父級節點的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");
}
});
}
});
}