1. 程式人生 > >樹形節點非同步載入

樹形節點非同步載入

一,準備樹形實體。

二,組裝資料,注意一定要將父級節點的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");
				}
			});
		}
	});
}