zoukankan      html  css  js  c++  java
  • 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',120,sortable:false,hidden:true }, 
                            {field:'SHORT_NAME',title:'区域名',halign:'center',120,sortable:false}, 
                            {field:'AREA_LEVEL',title:'级次',halign:'center',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')";

  • 相关阅读:
    LeetCode 189. Rotate Array
    LeetCode 965. Univalued Binary Tree
    LeetCode 111. Minimum Depth of Binary Tree
    LeetCode 104. Maximum Depth of Binary Tree
    Windows下MySQL的安装与配置
    LeetCode 58. Length of Last Word
    LeetCode 41. First Missing Positive
    LeetCode 283. Move Zeroes
    《蚂蚁金服11.11:支付宝和蚂蚁花呗的技术架构及实践》读后感
    删除docker下的镜像
  • 原文地址:https://www.cnblogs.com/SunBlog/p/5384532.html
Copyright © 2011-2022 走看看