easyui-treegrid 数据格式
1.远程加载
<div class="easyui-layout" data-options="fit:true">
<!-- 下 -->
<div data-options="region:'center',border:true" class="grid-lines-bottom-only">
<!-- 表 -->
<table id="${data1_id}" class="easyui-treegrid"
data-options="rownumbers:true,
striped:true,
remoteSort:false,
multiSort:false,
singleSelect:true,
fitColumns:true,
border:false,
<%-- onLoadSuccess:showFileds_${g_modid}, --%>
fit:true,
idField: 'aid',
treeField: 'title',
url:'${ctx}/datamotor/qry/${data1_dsid}',
method:'post'">
<thead>
<tr>
<%-- ${data1_col} --%>
</tr>
</thead>
</table>
<!-- 表结束 -->
</div>
<!-- 下结束 -->
</div>
2.加载本地数据
格式如下
[{
"id":1,
"text":"My Documents",
"children":[{
"id":11,
"text":"Photos",
"state":"closed",
"children":[{
"id":111,
"text":"Friend"
},{
"id":112,
"text":"Wife"
},{
"id":113,
"text":"Company"
}]
},{
"id":12,
"text":"Program Files",
"children":[{
"id":121,
"text":"Intel"
},{
"id":122,
"text":"Java",
"attributes":{
"p1":"Custom Attribute1",
"p2":"Custom Attribute2"
}
},{
"id":123,
"text":"Microsoft Office"
},{
"id":124,
"text":"Games",
"checked":true
}]
},{
"id":13,
"text":"index.html"
},{
"id":14,
"text":"about.html"
},{
"id":15,
"text":"welcome.html"
}]
}]
2.例子<div id="map_alarmfilter_tree" class="easyui-tree" data-options="method:'get',animate:true,checkbox:true" style="height:385px;width:630px;overflow-y:auto"></div>
3.var alarmfilterdata = arrayRowToTreeData(_data.rows, 'aid', 'grpid', 'children');
其中_data.rows数据如下
/**
* 将json串转换成树形结构
* @param array 要转换的数组
* @param idStr id字段
* @param pidStr 父节点字段
* @param chindrenStr 子节点字段
*/
function arrayRowToTreeData(array, idStr, pidStr, chindrenStr) {
var ret = [], hash = {}, id = idStr, pid = pidStr, children = chindrenStr, len = array.length;
for (i = 0; i < len; i++) {
hash[array[i][id]] = array[i];
}
for (j = 0; j < len; j++) {
var aVal = array[j], hashVP = hash[aVal[pid]];
if (hashVP) {
!hashVP[children] && (hashVP[children] = []);
hashVP[children].push(aVal);
} else {
ret.push(aVal);
}
}
return ret;
}
4.jsonAddTextAttr_alarmfilter(alarmfilterdata);
function jsonAddTextAttr_alarmfilter(data) {
for (var i = 0; i < data.length; i++) {
data[i].id = data[i].aid;
data[i].text = data[i].text;
if(data[i].id > 0 && data[i].notice == 1){//默认不勾选父节点
data[i].checked = true;
}
if(data[i].id < 0){
data[i].state = 'closed';
}else{
data[i].state = 'open';
}
data[i].attributes = null;
if (data[i].children == null)
data[i].iconCls = 'icon-tree-folder';
if (data[i].children != null) {
jsonAddTextAttr_alarmfilter(data[i].children);
}
}
}
5、 var alarmfilter = $('#map_alarmfilter_tree');
alarmfilter.tree({
data: alarmfilterdata,//加载数据
onDblClick: function(node){//双击展开事件
if(node.grpid == null && node.state == 'closed'){
alarmfilter.tree('expand', node.target);
}else if(node.grpid == null && node.state == 'open'){
alarmfilter.tree('collapse', node.target);
}
}
});