2016-09-14 4 views
2

eBayカテゴリにtreeGridを使用します。free-jggrid treeGridはテーブルの一番下に展開します

全てのカテゴリは(PIC:collapsed categories)崩壊し始めた:

私のテーブル定義のサブカテゴリがテーブルの下部に拡大し、スタンプにklicking後

はない(expanded category Stamps PIC)スタンプ以下:

$('#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" 
}, 

私は多くをテストし、検索しましたが、私は解決策を見つけることができません... 私は間違っていると私はこれをどのように解決することができますか?

+0

投稿したJSONデータは、写真には対応していません。 JSONデータまたは画像を更新できますか?問題を再現するデモ(例えば、jsfiddleで)を準備することは良いことです。あなたの画像に対応する典型的なエラーは、入力の項目が間違っている場合です。 jqGrid(およびfree jqGrid)では、入力ノードの順序( 'url'から返される)が** expanded ** itemsに正確に対応することが必要です。私は、「Stamps」ノードの子供たちは、「Stamps」の後ではなく、「Video Games&Consoles」の後に**あると思う。不要に隠された 'id'カラムを追加で削除することをお勧めします。 – Oleg

+0

ありがとう、オレグ。順序が問題です。 – Michael

+0

あなたは大歓迎です!私はあなたを助けることができてうれしいです。私は自分の答えを投稿した。あなたはそれを受け入れることができます(http://meta.stackexchange.com/a/5235/147495)それはあなたの最初の評判のポイントを取得します。 – Oleg

答えて

0

あなたが投稿したJSONデータは、画像に対応していません。 JSONデータまたは画像を更新できますか?問題を再現するデモ(例えば、jsfiddleで)を準備することは良いことです。あなたの画像に対応する典型的なエラーは、入力の項目が間違っている場合です。 jqGrid(およびfree jqGrid)では、(urlから返された)入力ノードの順序が、拡張された項目に正確に対応することが必要です。 jqGridはTreeGridのノードを同じ順序でロードして配置することを理解することが重要です。次にはすべての子と一緒にの折りたたまれたノードを隠します。

「スタンプ」ノードの子は、「スタンプ」の後ではなく「ビデオゲーム&コンソール」の後にとします。ロードされたアイテムの順序を確認して修正する必要があります。

不要な隠しファイルidを追加で削除することをお勧めします。 height:'auto', autowidth:falsegridview:trueのオプションは、空きjqGridのデフォルトであり、削除することができます。オプションpager:'#pager'はTreeGridのために通常必要とされていないが、それは、あなたは、あなたが、pager:'#pager'pager: trueに変更不要な空<div id="pager"></div>を削除し、navGridまたはinlineNav'#pager'をスキップすることができ、たとえば、navGridのためにそれを必要とします。無料のjqGridはページャーdivを自動的に生成し、navGridまたはinlineNavもページャーを自動的に使用します。

関連する問題