记录下自己写treegrid的过程

摘要: 框架是公司自己的，和servlet很相似，前台easyui和jquery，以前没有用过jquery ui,不过ui的样式也是公司调整的。稍微有些出入，大体相同。
做一个treegrid，就是不能出现树状结果，无法展开，并且还出现过jquery的js错误提示，有必要记录下。但是做完后发现，自己明明离实现就差那么一丢丢，但就是没有迈过那道坎。（平复下这个躁动的心........)

不多说了 直接上代码 和自己出错的地方

jsp页面代码 --这里 class="rex-treegrid"是公司定义的表格样式及treegrid的样式和特性；

<table id="grid" class="rex-treegrid" fit="true" border="false" >
</table>

js代码

$(function (){
$('#grid').treegrid({
url:'***********.do?method=proxyUserGrid&userType=0',//查询初始的内容，
idField:'userId',
treeField:'userId',
//	    loadFilter: myLoadFilter,
//	    onLoadSuccess: function () {$('#grid').treegrid('collapseAll')},
columns:[[
{field:'userId',title:' 用户编号',width:220},
{field:'userName',title:'用户名称',width:220 },
{field:'payId',title:'联行账户',width:120},
{field:'createDate',title:'注册时间',width:220},
{field:'refereeId',title:'推荐人编号',width:130},

{field:'profitBegin',title:'收益开始时间',width:140},
{field:'profitEnd',title:'收益结束时间',width:140},
{field:'userState',title:'启用状态',width:120, formatter:function(value,row,index)                    {return (value==1?'启用':'停用');}
},

{field:'remark',title:'备注',width:120}
]],
onBeforeExpand: function (row) {   //展开父节点根据Id进行异步加载
if ($('#grid').treegrid('getChildren', row.userId) == "") {//当子节点下面有数据时不加载
$.ajax({     //获取子节点
url: "*********.do?method=proxyUserGrid&userType=0",
type: "post",
data: { refereeId: row.userId},
dataType: "json",
async: false,
success: function (data) {
$('#grid').treegrid('append', {
parent: row.userId,
data: data.rows
})
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
}
})
}
}

});
});

这里写下自己对treegrid的理解

idField：是能唯一标识当前行（row）的一个字段,

treeField:是理解为在那一列上展示树状结构。

后台处理，公司框架在后台封装了一个View参数，里面有个Grid对象，如果查询的结果列表放入这个对象，前台他会自动匹配对应的列。

public void proxyUserGrid(HttpServletRequest request ,HttpServletResponse response,AjaxView view) throws Exception{
Grid grid = view.getGrid();

TUser domain
3ff0
= new  TUser();
domain.setUserId(view.getString("userId"));
domain.setUserName(view.getString("userName"));
domain.setPayId(view.getString("payId"));
domain.setRefereeId(view.getString("refereeId"));
domain.setState(view.getString("state"));
domain.setStartDate(view.getString("startDate"));
domain.setEndDate(view.getString("endDate"));
domain.setProfitState(view.getString("profitState"));
domain.setUserType(view.getString("userType"));
grid = dao.getProxyUserGrid(grid,domain);
view.setGrid(grid);
}

页面的结果为



点击节点：



期间的问题：

1、页面初始化加载时展示全为上图‘代理5的样式’

最开始以为是公司框架没有解析好grid表格，花了2-3个小时去看框架的处理，看的云里雾里，也没看多清 楚。在网上找网页时记得有个特性 ”state：‘closed’||'open'“,就暂时先给sql中设置了一个固定的列， 果然页面就能够显示文件夹样式了。所以就在sql中调整了下，判断当前查询的是否有子节点，判断展开的节 点样式。这个问题就高一段落。
2、节点打开到第三级时就自动关闭了

调整发现是下面这段代码问题：

onLoadSuccess: function () {$('#grid').treegrid('collapseAll')},

这个方法：数据加载完成之后，折叠所有节点。所以当节点出现叶子节点时就全部折叠了。

3、重复打开非叶子节点，发现叶子节点重复加载。

所以就在onBeforeExpand方法里增加了一个判断。

if ($('#grid').treegrid('getChildren', row.userId) == "") {
......
}

注意的地方：在 onBeforeExpand方法中，AJAX成功后返回的数据DATA,我这边返回的格式为：



所以，在data:data.rows;这个需要根据自己的情况处理。

6、关于treegrid查询

最开始是这样写的：

var state = $('#grid').data('datagrid');
state.options.url = '****.html?method=userGrid';
$('#grid').datagrid('load', params);

发现根本没反应，发现不能这样用：

var url = '***?method=proxyUserGrid';
$.post(url, params, function(data) {
var d = data;//返回json格式结果
$('#grid').treegrid('loadData',d);//加载数据更新treegrid
}, 'json');