在按照任务写一个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