TreeGrid是树形表格，为了展示成树形，比数据表格主要增加了以下两点；
1、表格属性中设置 idField、treeField 两个属性；idField 表示用于区分上下级的主键，treeField 表示展开、关闭下级的字段；
2、获取的数据中新增属性：_parentId、state；_parentId 表示当前行的父节点 idField 值，state表示展开、关闭 的默认状态
_parentId
- 如果是顶级节点，则必须为null值，或者将该属性delete掉，否则数据不能正常显示；
state
- ‘open‘ :默认该节点是打开的 ，如果加载本节点的时候没有加载子节点并且为 ‘open‘,则以后也不会加载子节点；
- ‘closed‘：默认该节点是关闭的，展开该节点时，如果下级数据随本级数据一起加载，数据就展示下级，没有下级数据则自动请求服务器加载数据。
数据格式如下：
{"total":null,"rows":[{"OID":"522300000000","SHORT_NAME":"黔西南州","AREA_LEVEL":1,"_parentId":"520000000000","state":"closed"},{"OID":"520300000000","SHORT_NAME":"遵义市","AREA_LEVEL":1,"_parentId":"520000000000","state":"closed"},{"OID":"520100000000","SHORT_NAME":"贵阳市","AREA_LEVEL":1,"_parentId":"520000000000","state":"closed"},{"OID":"520200000000","SHORT_NAME":"六盘水市","AREA_LEVEL":1,"_parentId":"520000000000","state":"closed"},{"OID":"520500000000","SHORT_NAME":"毕节市","AREA_LEVEL":1,"_parentId":"520000000000","state":"closed"},{"OID":"522700000000","SHORT_NAME":"黔南州","AREA_LEVEL":1,"_parentId":"520000000000","state":"closed"},{"OID":"520600000000","SHORT_NAME":"铜仁市","AREA_LEVEL":1,"_parentId":"520000000000","state":"closed"},{"OID":"520400000000","SHORT_NAME":"安顺市","AREA_LEVEL":1,"_parentId":"520000000000","state":"closed"},{"OID":"522600000000","SHORT_NAME":"黔东南州","AREA_LEVEL":1,"_parentId":"520000000000","state":"closed"},{"OID":"520700000000","SHORT_NAME":"贵安新区","AREA_LEVEL":1,"_parentId":"520000000000","state":"closed"},{"OID":"520000000000","SHORT_NAME":"贵州省","AREA_LEVEL":-1,"_parentId":null,"state":"closed"}]}
初始化表格函数定义如下：
//查询当前登录人及下级、被当前人员审核 的考核信息
$(‘#table_khcx‘).treegrid({
title:‘‘, //标题 考核信息查询
iconCls:‘icon-tip‘, //图标
fit:true,
method:‘post‘, //数据方式
iconCls:‘icon-tip‘, //图标
singleSelect: true, //单选
fitColumns: true, //自动调整各列，用了这个属性，下面各列的宽度值就只是一个比例。
striped: true, //行斑马线
nowrap:false, //true 禁止换行
pagination:true,
pageSize:20,
rownumbers:true, //显示行号
loadMsg:‘正在加载，请稍候……‘, //加载数据的时候显示提示消息
idField:‘CODE‘, //主键字段
queryParams:{}, //查询参数集合
scrollbarSize:18,
idField:‘OID‘,
treeField:‘SHORT_NAME‘,
url:"${ctx}/treegrid/getdata", //数据来源 jiujiayi/pkhxx
columns:[
[
{field:‘OID‘,title:‘ID‘,halign:‘center‘,width:120,sortable:false,hidden:true },
{field:‘SHORT_NAME‘,title:‘区域名‘,halign:‘center‘,width:120,sortable:false},
{field:‘AREA_LEVEL‘,title:‘级次‘,halign:‘center‘,width:120,sortable:false }
]
],
//清除datagrid之前的选择状态
onLoadSuccess:function(){
$(‘#table_khcx‘).treegrid(‘clearSelections‘);
if($(‘#table_khcx‘).treegrid(‘getRows‘).length>0){
$(‘#table_khcx‘).treegrid(‘selectRow‘,0);//默认选中第一行
};
$(this).treegrid(‘resize‘);
},
onLoadError:function(){
$.messager.alert("提示",‘获取数据失败！‘,‘info‘);
}
})
sql如下：
sql="select OID,SHORT_NAME,AREA_LEVEL, case PARENT_ID when ‘-1‘ then null else PARENT_ID end \"_parentId\",‘closed‘ \"state\" "
+ "from Cfg_Basic_Area where rownum<20 and AREA_LEVEL in (‘-1‘,‘1‘)";