TreeGrid

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