free-jggrid treeGrid 在表格底部展开答案

【问题标题】：free-jggrid treeGrid expands at bottom of the tablefree-jggrid treeGrid 在表格底部展开
【发布时间】：2017-01-22 13:09:10
【问题描述】：

我想为 eBay 类别使用 treeGrid。

所有类别开始折叠（图片：collapsed categories）

点击Stamps后，子类别会在表格底部展开，而不是低于Stamps（图片：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"
},

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

【问题讨论】：

您发布的JSON数据与图片不对应。您能否更新 JSON 数据或图片。最好准备重现问题的演示（例如在 jsfiddle 中）。如果输入中的项目，则对应于您的图片的典型错误是错误的顺序。 jqGrid（和免费的 jqGrid）要求输入节点的顺序（从url 返回）完全对应于扩展项。我想“Stamps”节点的子节点是在“Video Games & Consoles”之后而不是在“Stamps”之后。我建议您另外删除不需要的隐藏id 列。
谢谢，奥列格。顺序是问题。
不客气！我很高兴能帮助你。我发布了我的答案。你可以"accept"它并获得你的第一个声望点。

标签： jquery jqgrid free-jqgrid treegrid

【解决方案1】：

您发布的 JSON 数据与图片不对应。您能否更新 JSON 数据或图片。最好准备重现问题的演示（例如在 jsfiddle 中）。如果输入中的项目，则对应于您的图片的典型错误是错误的顺序。 jqGrid（和免费的 jqGrid）要求输入节点的顺序（从 url 返回）与扩展项完全对应。重要的是要了解 jqGrid 以相同的顺序加载和放置 TreeGrid 的节点。然后它隐藏折叠节点和所有子节点。

我认为“Stamps”节点的子节点在“Video Games & Consoles”之后而不是“Stamps”之后。您应该验证并修复加载项目的顺序。

我建议您另外删除不需要的隐藏id 列。 height:'auto', autowidth:false 和 gridview:true 选项是免费 jqGrid 中的默认选项，可以删除。 TreeGrid 通常不需要选项pager:'#pager'，但navGrid 需要它，例如，您可以将pager:'#pager' 更改为pager: true，删除不需要的空<div id="pager"></div> 并跳过@987654330 中的'#pager' @ 或 inlineNav。免费的jqGrid会自动生成pager div，navGrid或inlineNav也会自动使用pager。

【讨论】：