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

巴特西

TreeGrid

最新文章

热门文章