jqgrid樹不是像列表而不是樹顯示

我有jqgrid配置下面應該應該顯示樹狀結構。相反，我正在顯示一個扁平列表結構。有人可以告訴我我失蹤了嗎？下面是我使用的HTML頁面中列出的順序版本：jqgrid樹不是像列表而不是樹顯示

jquery/3.2.1/jquery.min.js, 
jqgrid/4.6.0/js/i18n/grid.locale-en.js, 
jqueryui/1.12.1/jquery-ui.min.js

從triand.com網站：

jqgrid/js/i18n/grid.locale-en.js 
jqgrid/js/jquery.jqGrid.min.js

我還利用這些CSS：

jqueryui/1.8.14/themes/redmond/jquery-ui.css, 
jqgrid/themes/ui.jqgrid.css (from triand.com), 
jqueryui/1.12.1/themes/smoothness/jquery-ui.css

按此順序。我的網格看起來灰色，而不是漂亮的藍色。我不明白爲什麼。

$(document).ready(function(){ 
    $("#list").jqGrid({ 
     url : "/reconcile", 
     datatype : "json", 
     mtype : 'GET', 
     colModel : [ 
      {name: "id",width:1,hidden:true, key:true}, 
      {name : 'data.key.busnDate', label : 'Business Date', hidden:false, sorttype:"date", width : 80 }, 
      {name : 'data.product', label : 'Product', sorttype:"string", width : 50, editable : false}, 
      {name : 'data.quantityBought', label : 'Quantity Bought', sorttype:"int", width : 100, editable : false}, 
      {"name":"level","hidden":true}, 
      {"name":"parent","hidden":true}, 
      {"name":"isLeaf","hidden":true}, 
      {"name":"expanded","hidden":true}, 
      {"name":"uiicon","hidden":true} 
     ], 
     treeGrid: true, 
     pager : '#pager', 
     loadonce:false, 
     rowNum : 25, 
     height: 'auto', 
     rowList : [ 25,50,100,200 ], 
     sortname : 'key.positionId', 
     sortorder : 'asc', 
     viewrecords : true, 
     gridview : true, 
     multiselect: false, 
     multiboxonly: false, 
     autoencode: true, 
     caption : 'ARC Reconciliation', 
     emptyrecords: "No records to found for given date!", 
     jsonReader : { 
       repeatitems : true, 
     }, 
     treeIcons : { 
      "plus": "ui-icon-circlesmall-plus", 
      "minus": "ui-icon-circlesmall-minus", 
      "leaf" : "ui-icon-document" 
     }, 
     ExpandColumn: 'key.positionId' 
    }); 
    jQuery("#list").jqGrid('navGrid', '#pager', { 
     edit : false, 
     add : false, 
     del : false, 
     view : true, 
     search : true 
    }); 
    $('#datePick').datepicker({ 
     onSelect: function (dateText, inst) { 
      var e = $("#list").data("events"); 
      if (typeof (e) !== "undefined" && typeof (e.reloadGrid) !== "undefined") { 
       $("#list").trigger("reloadGrid"); 
      } 
     } 
    }); 
});

感謝

來源

2017-07-07 Fabio

它知道從'網址返回的測試數據是非常重要的訪問或tree grid demo here：「/調和」'（2-3節點和葉子）。如果您創建**演示**（例如在jsfiddle中），將會有所幫助。而且，你不會寫出你想要使用的jqGrid的哪個**版本**：免費或商業版。在4.7版之後，Trirand停止提供免費版本。 **商業** Guriddo jqGrid版本可用於[價格]（http://guriddo.net/?page_id=103334）。我開發**替代**叉[免費jqGrid]（https://github.com/free-jqgrid/jqGrid），它與舊的jqGrid 4.x兼容。你想使用哪個版本的jqGrid？ – Oleg

我上一次工作是在6年前。我試圖向我的新組織展示這個網格，但我有點生鏽。我將URL更改爲「https://cdn.jsdelivr.net/npm/[email protected]/js/jquery.jqgrid.min.js」以確保我獲得了正確的版本。我從你的評論中瞭解到，我在上面顯示的配置是可以的，而且我的數據可能有問題。我會嘗試顯示數據，看看是否有助於解決我的問題。我也會嘗試創建一個演示。我在某處讀了一篇評論，說樹不能讀取靜態數據，但可能已經更新。 – Fabio

不要忘了使用正確的CSS：例如https://cdn.jsdelivr.net/npm/[email protected]/css/ui.jqgrid.min.css。你可以找到一些信息如何使用免費的jqGrid [這裏]（https://free-jqgrid.github.io/getting-started/index.html）。另外免費jqGrid有許多新功能和改進。例如，請參閱[這裏]（https://github.com/free-jqgrid/jqGrid/wiki/additionalProperties-option-makes-unneeded-hidden-columns-in-local-scenario）。您應該**從'colModel'中刪除**所有幫助列（'level'，'parent'，'isLeaf'，'expanded'，'uiicon'，甚至'id'），但要保存這些屬性。 – Oleg

你可以看一下我們的新Guriddo jqGrid documentation here爲了得到你的問題的答案。

此外這個你可能想了很多新的功能

來源

2017-07-07 21:57:22

我看着你提供的示例，我開始只是複製配置並開始以這種方式工作。我意識到我在數據中有一個錯誤，一旦我解決了這一切，然後我只是添加了一些更多的功能。只有一些帖子已經過時，我使用了這些，這就是爲什麼我沒有得到任何地方。謝謝 – Fabio

jqgrid樹不是像列表而不是樹顯示

回答

相關問題