记录下自己写treegrid的过程

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

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 = 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');

转载于:https://my.oschina.net/carota/blog/650538