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的分级展示数据的效果了。