free-jggrid treeGrid扩展到表的底部

时间:2016-09-14 16:21:16

标签: jquery jqgrid free-jqgrid treegrid

我想在eBay类别中使用treeGrid。

所有类别开始崩溃(图片:collapsed categories

点击邮票后,子类别会扩展到表格的底部,而不是邮票(图片:expanded category Stamps

我的表格定义:

$('#list').jqGrid({
cmTemplate:{sortable:false, autoResizable: true},
multiSort: false,
url:'/admin/ebay/kategorien/get_jqgrid',
datatype:'json',
mtype:'POST',
jsonReader:{ repeatitems: false },
colModel:[{name:'id',index:'id',width:1,hidden:true,key:true},
          {name:'name', label:'Name', width:200},
          {name:'site_id', label:'Site', width:60},
          {name:'cat_id', label:'Kat.-ID', width:60},
          {name:'leaf_category', label:'Erlaubt', width:60},
          {name:'in_use', label:'Benutzen', width:64,
           formatter:'checkbox', align:'center', stype:'select',
           editoptions:{value:':Alle;-:-;+:+'}}],
pager:'#pager', 
height:'auto',
autowidth:false,
shrinkToFit:false,
guiStyle: 'bootstrap',
viewrecords:true,
gridview:true,
loadComplete: function () {
$(this).triggerHandler('resize.jqGrid');
},
editurl:'/admin/ebay/kategorien/edit',
iconSet:'fontAwesome',
treeGrid:true,
treeGridModel:'adjacency',
ExpandColumn:'name',
ExpandColClick:'true',
caption:'eBay-Kategorien'
});

数据示例:

{
 "site_id":"0",
 "cat_version":"114",
 "cat_id":"20081",
 "cat_level":"1",
 "name":"Antiques",
 "parent_id":"20081",
 "leaf_category":"0",
 "in_use":"0",
 "id":"20081",
 "level":0,
 "parent":"null",
 "isLeaf":"false",
 "expanded":"false"
},
{
 "site_id":"0",
 "cat_version":"114",
 "cat_id":"260",
 "cat_level":"1",
 "name":"Stamps",
 "parent_id":"260",
 "leaf_category":"0",
 "in_use":"0",
 "id":"260",
 "level":0,
 "parent":"null",
 "isLeaf":"false",
 "expanded":"false"
},
{
 "site_id":"0",
 "cat_version":"114",
 "cat_id":"181423",
 "cat_level":"2",
 "name":"Africa",
 "parent_id":"260",
 "leaf_category":"0",
 "in_use":"0",
 "id":"181423",
 "level":1,
 "parent":"260",
 "isLeaf":"false",
 "expanded":"false"
},

我测试和搜索很多,但我找不到解决方案...... 我做错了什么,我该如何解决?

1 个答案:

答案 0 :(得分:0)

您发布的JSON数据与图片不对应。你可以更新JSON数据或图片。准备重现问题的演示(例如,在jsfiddle中)是很好的。如果输入中的项目,则对应您的图片的典型错误是错误的顺序。 jqGrid(和free jqGrid)要求输入节点的顺序(从url返回)与扩展项完全对应。了解jqGrid以相同的顺序加载和放置TreeGrid的节点非常重要。然后它与所有孩子一起隐藏折叠节点。

我认为"邮票"的孩子们节点是之后"视频游戏&控制台"而不是"邮票"。您应该验证并修复已加载项目的顺序。

我建议您另外删除不需要的隐藏id列。选项height:'auto', autowidth:falsegridview:true在免费的jqGrid中是默认选项,可以删除。 TreeGrid通常不需要选项pager:'#pager',但您需要navGrid,例如,您可以将pager:'#pager'更改为pager: true,删除不需要的空{{1}在<div id="pager"></div>'#pager'中跳过navGrid。免费的jqGrid会自动生成寻呼机div,inlineNavnavGrid也会自动使用寻呼机。