jqGrid(1)-TreeGrid的相关配置以及注意事项

在按照任务写一个web app时，使用了jqGrid表格插件其中使用了TreeGrid，查了许多教程，调整了很多方面，遇到不少的坑。在这里记录一下。要使用jqgrid的treegrid功能需要开启treegrid功能,配置代码如下:

    $("#table_list_2").jqGrid({
                url:"{:url('Table/load_treeGrid')}",//表格数据初步加载请求地址　tp5写法
                datatype:"json",//返回数据类型　必须写
                height: "100%",
                width:'100%',
                autowidth: true,
                shrinkToFit: true,//表格宽度自动充满
                sortable:true,//开启可拖动功能
                treeGrid:true,//开启treegrid功能
                // multiSort: true,//组合查询功能
                colNames:['部门代号','id','部门名称','部门类型','负责人','联系号码','录入日期','修改日期','状态'],//自定义列明　　需要和下面colmodel一一对应
                colModel:[
                    {name:'scost_no',index:'scost_no',align:"left"},
                    {name:'id',index:'id',hidden:true,key:true},//开启treegrid功能情况下 id(类似字段)必须有　
                    {name:'dept_name',index:'dept_name',align:"left"},
                    {name:'dept_type',index:'dept_type',sortable:false,align:"left"},
                    {name:'leader',index:'leader',align:"left"},
                    {name:'tel',index:'tel' ,align:"left"},
                    {name:'date_entry',index:'date_entry',formatter:"date",formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d'},align:"left"},
                    {name:'date_update',index:'date_update',formatter:"date",formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d'},align:"left"},
                    {name:'status',index:'status',align:"left"},
                ],
                pager:true,//开启分页(treegrid　无需开启)
                jsonReader:{
                    root:"data",
                    repeatitems: false  
                },//关键配置　jqgrid 默认对返回json有特殊的要求，变态到名称也是固定的。所以需要特殊配置。自定义的话　repeatiteams:false
                treeGridModel:'adjacency',//treegrid　返回ｊｓｏｎ规定的字段类型  默认nested 
                ExpandCloumn:'scost_no',//树形结构icons显示的字段　最好是colModel的第一个 
                ExpandColClick:true,//允许点击行来收缩折叠
                treeReader : {  
                     level_field: "level",  //等级　
                     parent_id_field: "parent",  //父id
                     leaf_field: "isLeaf",  //是否是子节点
                     expanded_field: "expanded" //是否已展开
                  
                },//类似jsonreader　可自定义treegrid返回数据中必要字段的属性名 这里是adjacency　对应treeGridModel　注:这里的字段是返回数据必须的
                hidegrid: false
            });

上面简要的给配置属性添加了备注，基本是常用的，基于自己的理解可能有些错误。
这里写一下我遇到的坑:我给设置了ExpandCloumn:"socst_no" 但是colModel的顺序为id,scost_no,...。改为scost_no,id就行了就是这么简单愣是浪费我半天时间。shit!　
其实这些东西都是我看了网上的博客后写的。但在上面的这个坑可没人提及。
本文用到的jqgrid是inspinia中的　jqgrid版本4.6.0

最后编辑于：2019.04.29 08:56:38