easyUI treegrid 分級數據展示

項目中需要分級展示數據，所以就用到了easyUI的treegrid。

成品如下圖所示：

圖中1爲查詢數據的類型，2爲數據名稱，3爲根據1和2得出的數據（用treegrid展示）。

圖一是easyui的combobox，沒什麼說的，寫死就行。

圖二也是combobox，但是數據時動態生成的，根據用戶輸入的文字。

代碼

1.圖二的combobox

<input class="easyui-combobox" id="SearchName" style="width:100%" data-options="events:{keyup:SearchInput}">

最重要的是實時獲取用戶輸入的文字，keyup事件對用的函數，如下所示：

function SearchInput(){
	var text = this.value;
	var select = $("#EndtoEnd").combobox('getValue');
	if(select != "" && text != ""){
		$.ajax({
			url:basePath+"/loadNameorId.action",
			type:'POST',
			data:{'projectId':projectId,'text':text,'select':select},
			success:function(data){
				if(data != ""){
					//爲combobox賦值數據
					$("#SearchName").combobox('loadData',data);
					//回顯combobox文本框的值
					$("#SearchName").combobox('setText',text);
					//下拉combobox，形成用戶輸入完成後自動下拉的效果
					$("#SearchName").combobox('showPanel');
				}
			}
		}); 
	}
}

根據用戶輸入的文字，在後臺獲取數據，用過Ajax返回data,再展示到combobox。

2.treegrid

<table id="tt" style="width:1600xp;height:1000px;"></table>

       根據用戶輸入的文字去數據庫或其他地方尋找數據，並平湊成treegrid需要的格式，並返回。這裏最終的是平湊數據格式。爲了方便，我自己創建了一個數據格式的類，這樣比較方便設置數據，new一個類，並把對應的數據set進去就好了。下面是類的代碼：

public class TreeGrid {
	private String id;
	private String title;
	private String nowAss;
	private String status;
	//節點狀態（展開，收縮）
	private String state;
	private String type;
	private String url;
	//自定義標記，節點是否展開
	private String loadFlag;
	//下面的子節點集合
	private List<TreeGrid> children;

    …………下面是get set方法

比如你的數據格式是一個父節點下面有兩個子節點:如下圖所示：

那麼你需要這樣構建數據：

//這個是父級節點
TreeGrid topGrid = new TreeGrid();
topGrid.setxxx();
topGrid.setxxx();

List<TreeGrid> childrenGrid = new ArrayList<>();
//子節點1,子節點2
TreeGrid childrenGrid1 = new TreeGrid();
TreeGrid childrenGrid2 = new TreeGrid();
childrenGrid1.setxxx();
childrenGrid1.setxxx();
childrenGrid2.setxxx();
childrenGrid2.setxxx();
childrendGrid.add(childrenGrid1);
childrendGrid.add(childrenGrid2); 

//把子節點集合set到父級節點
topGrid.setChildren(childrenGrid);
//這樣，topGrid就是一個你想要的格式了，對了返回的時候需要把它轉爲json哦

這樣就可以完成treegrid的分級展示數據的效果了。