JQgrid - TreeGrid ошибка

Question

Я посмотрел на соответствующий вопрос This question

и попытался применить к моим задачам. Я получаю заголовки сетки с некоторым висячим пузырем над ним, в котором говорится «Загрузка ...», и ничего не происходит. Когда я запускаю консоль, там я вижу ошибку, которая говорит это:

SCRIPT5007: Unable to get value of the property 'stype': object is null or undefined 
jquery.jqGrid.min.js, line 72 character 461  

Как это:

1) Решение, представленное Олег большое работает из коробки. То есть с его json и его javascript. Благодарю.
2) У меня есть данные Json, которые похожи на то, что используется Олегом. Здесь

{ 
"results":[ 
    { 
    "analysisStatus":null, 
    "label":"SPR - Test Only - Cost Analyzer 1-GUI Prototype", 
    "leaf":false, 
    "level":0, 
    "lockedBy":"", 
    "overrideCostingMRC":955.2800, 
    "overrideCostingNRC":3739.7900, 
    "overrideCostingUsage":151.7300, 
    "overridePricingMRC":1531.4800, 
    "overridePricingNRC":2580.0000, 
    "overridePricingUsage":210.4800, 
    "parent":"", 
    "proposedCostingMRC":955.2800, 
    "proposedCostingNRC":3739.7900, 
    "proposedCostingUsage":151.7300, 
    "proposedPricingMRC":1531.4800, 
    "proposedPricingNRC":2580.0000, 
    "proposedPricingUsage":210.4800, 
    "rowId":36624, 
    "standardCostingMRC":955.2800, 
    "standardCostingNRC":3739.7900, 
    "standardCostingUsage":151.7300, 
    "standardPricingMRC":1531.4800, 
    "standardPricingNRC":2580.0000, 
    "standardPricingUsage":210.4800 
    }, 
    { 
    "label":"Broadspeed DIA 3.0: 1.5 Mb\/s", 
    "leaf":false, 
    "level":1, 
    "overrideCostingMRC":299.9400, 
    "overrideCostingNRC":118.4400, 
    "overrideCostingUsage":0.0000, 
    "overridePricingMRC":444.0000, 
    "overridePricingNRC":800.0000, 
    "overridePricingUsage":0.0000, 
    "parent":36624, 
    "proposedCostingMRC":299.9400, 
    "proposedCostingNRC":118.4400, 
    "proposedCostingUsage":0.0000, 
    "proposedPricingMRC":444.0000, 
    "proposedPricingNRC":800.0000, 
    "proposedPricingUsage":0.0000, 
    "rowId":54130, 
    "standardCostingMRC":299.9400, 
    "standardCostingNRC":118.4400, 
    "standardCostingUsage":0.0000, 
    "standardPricingMRC":444.0000, 
    "standardPricingNRC":800.0000, 
    "standardPricingUsage":0.0000 
    }, 
    { 
    "label":"Broadview PRI: Measured GR", 
    "leaf":false, 
    "level":1, 
    "overrideCostingMRC":298.1700, 
    "overrideCostingNRC":208.0000, 
    "overrideCostingUsage":115.7600, 
    "overridePricingMRC":409.6800, 
    "overridePricingNRC":800.0000, 
    "overridePricingUsage":210.4800, 
    "parent":36624, 
    "proposedCostingMRC":298.1700, 
    "proposedCostingNRC":208.0000, 
    "proposedCostingUsage":115.7600, 
    "proposedPricingMRC":409.6800, 
    "proposedPricingNRC":800.0000, 
    "proposedPricingUsage":210.4800, 
    "rowId":54131, 
    "standardCostingMRC":298.1700, 
    "standardCostingNRC":208.0000, 
    "standardCostingUsage":115.7600, 
    "standardPricingMRC":409.6800, 
    "standardPricingNRC":800.0000, 
    "standardPricingUsage":210.4800 
    }, 
    { 
    "label":"Wild Card - Customer", 
    "leaf":true, 
    "level":2, 
    "overrideCostingMRC":0.0000, 
    "overrideCostingNRC":0.0000, 
    "overrideCostingUsage":0.0000, 
    "overridePricingMRC":234.0000, 
    "overridePricingNRC":0.0000, 
    "overridePricingUsage":0.0000, 
    "parent":54130, 
    "proposedCostingMRC":0.0000, 
    "proposedCostingNRC":0.0000, 
    "proposedCostingUsage":0.0000, 
    "proposedPricingMRC":0.0000, 
    "proposedPricingNRC":0.0000, 
    "proposedPricingUsage":0.0000, 
    "rowId":388316, 
    "standardCostingMRC":0.0000, 
    "standardCostingNRC":0.0000, 
    "standardCostingUsage":0.0000, 
    "standardPricingMRC":0.0000, 
    "standardPricingNRC":0.0000, 
    "standardPricingUsage":0.0000 
    }, 
    { 
    "label":"Wild Card - Customer", 
    "leaf":true, 
    "level":2, 
    "overrideCostingMRC":0.0000, 
    "overrideCostingNRC":0.0000, 
    "overrideCostingUsage":0.0000, 
    "overridePricingMRC":40.0000, 
    "overridePricingNRC":0.0000, 
    "overridePricingUsage":0.0000, 
    "parent":54130, 
    "proposedCostingMRC":0.0000, 
    "proposedCostingNRC":0.0000, 
    "proposedCostingUsage":0.0000, 
    "proposedPricingMRC":0.0000, 
    "proposedPricingNRC":0.0000, 
    "proposedPricingUsage":0.0000, 
    "rowId":404097, 
    "standardCostingMRC":0.0000, 
    "standardCostingNRC":0.0000, 
    "standardCostingUsage":0.0000, 
    "standardPricingMRC":0.0000, 
    "standardPricingNRC":0.0000, 
    "standardPricingUsage":0.0000 
    }, 
    { 
    "label":"Wild Card - Customer", 
    "leaf":true, 
    "level":2, 
    "overrideCostingMRC":0.0000, 
    "overrideCostingNRC":0.0000, 
    "overrideCostingUsage":0.0000, 
    "overridePricingMRC":0.0000, 
    "overridePricingNRC":0.0000, 
    "overridePricingUsage":0.0000, 
    "parent":54131, 
    "proposedCostingMRC":0.0000, 
    "proposedCostingNRC":0.0000, 
    "proposedCostingUsage":0.0000, 
    "proposedPricingMRC":0.0000, 
    "proposedPricingNRC":0.0000, 
    "proposedPricingUsage":0.0000, 
    "rowId":404098, 
    "standardCostingMRC":0.0000, 
    "standardCostingNRC":20.0000, 
    "standardCostingUsage":0.0000, 
    "standardPricingMRC":0.0000, 
    "standardPricingNRC":0.0000, 
    "standardPricingUsage":0.0000 
    }, 
    { 
    "label":"Wild Card - Customer", 
    "leaf":true, 
    "level":2, 
    "overrideCostingMRC":0.0000, 
    "overrideCostingNRC":0.0000, 
    "overrideCostingUsage":0.0000, 
    "overridePricingMRC":3.25, 
    "overridePricingNRC":0.0000, 
    "overridePricingUsage":0.0000, 
    "parent":54131, 
    "proposedCostingMRC":0.0000, 
    "proposedCostingNRC":0.0000, 
    "proposedCostingUsage":0.0000, 
    "proposedPricingMRC":0.3000, 
    "proposedPricingNRC":0.0000, 
    "proposedPricingUsage":0.0000, 
    "rowId":404099, 
    "standardCostingMRC":0.0000, 
    "standardCostingNRC":0.0000, 
    "standardCostingUsage":0.0000, 
    "standardPricingMRC":0.0000, 
    "standardPricingNRC":0.0000, 
    "standardPricingUsage":0.0000 
    } 

] }

Моего Javascript код с определенной сеткой выглядит следующим образом:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $.getJSON('sources/cost-analyzer2.json', function(data){ 
      console.log(data.results); 
      var this_grid; 
      this_grid = $this_app.define_grid("#grid-results", { 
       caption: 'Proposals', 
       pager: '#pager-results', 
       data: $.extend(true, [], data.results),     
       datatype: "local", 
       height: 'auto', 

       rowNumbers: true,    
colNames:['Id', 'Description','Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 
        'Price Usage', 'Cost Usage', 
'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage', 
'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage' 
], 
colModel: [      
    { name: 'rowId', index: 'rowId', width: 20, hidden:true},  
    { name: 'label', index: 'abel', width: 100}, 
    { name: 'standardPricingMRC', index: 'standardPricingMRC', width: 70}, 
    { name: 'standardCostingMRC', index: 'standardCostingMRC', width: 70}, 
    { name: 'standardPricingNRC', index: 'standardPricingNRC', width: 70}, 
    { name: 'standardCostingNRC', index: 'standardCostingNRC', width: 70}, 
    { name: 'standardPricingUsage', index: 'standardPricingMRC', width: 70}, 
    { name: 'standardCostingUsage', index: 'standardCostingMRC', width: 70}, 
    { name: 'proposedPricingMRC', index: 'proposedPricingMRC', width: 70}, 
    { name: 'proposedCostingMRC', index: 'proposedCostingMRC', width: 70}, 
    { name: 'proposedPricingNRC', index: 'proposedPricingNRC', width: 70}, 
    { name: 'proposedCostingNRC', index: 'proposedCostingNRC', width: 70}, 
    { name: 'proposedPricingUsage', index: 'proposedPricingMRC', width: 70}, 
    { name: 'proposedCostingUsage', index: 'proposedCostingMRC', width: 70}, 
    { name: 'overridePricingMRC', index: 'overridePricingMRC', width: 70}, 
    { name: 'overrideCostingMRC', index: 'overrideCostingMRC', width: 70}, 
    { name: 'overridePricingNRC', index: 'overridePricingNRC', width: 70}, 
    { name: 'overrideCostingNRC', index: 'overrideCostingNRC', width: 70}, 
    { name: 'overridePricingUsage', index: 'overridePricingMRC', width: 70}, 
    { name: 'overrideCostingUsage', index: 'overrideCostingMRC', width: 70} 
      ], 
       localReader: { 
        repeatitems: false,      
        root: "data.results"      
       },// end of localReader 
       treeGrid: true, 
       treeGridModel: 'adjacency', 
       treedatatype: "local", 
       ExpandColumn: 'label', 
       inline_editing: false 
      });// end of define_grid -->  

      $("#grid-results").jqGrid('gridResize'); 
      $("#grid-results").jqGrid('setGroupHeaders', { 
    useColSpanStyle: false, 
    groupHeaders:[ 
{startColumnName: 'standardPricingMRC', numberOfColumns: 6, titleText: 'Standard'}, 
{startColumnName: 'proposedPricingMRC', numberOfColumns: 6, titleText: 'Proposed'}, 
{startColumnName: 'overridePricingMRC', numberOfColumns: 6, titleText: 'Override'} 
        ] 
       }); 

      $("#grid-results").jqGrid('setGroupHeaders', { 
        useColSpanStyle: true, 
        groupHeaders:[ 
{startColumnName: 'standardPricingMRC', numberOfColumns: 2, titleText: 'MRC'}, 
{startColumnName: 'standardPricingNRC', numberOfColumns: 2, titleText: 'NRC'}, 
{startColumnName: 'standardPricingUsage', numberOfColumns: 2, titleText: 'Usage'}, 
{startColumnName: 'proposedPricingMRC', numberOfColumns: 2, titleText: 'MRC'}, 
{startColumnName: 'proposedPricingNRC', numberOfColumns: 2, titleText: 'NRC'}, 
{startColumnName: 'proposedPricingUsage', numberOfColumns: 2, titleText: 'Usage'}, 
{startColumnName: 'overridePricingMRC', numberOfColumns: 2, titleText: 'MRC'}, 
{startColumnName: 'overridePricingNRC', numberOfColumns: 2, titleText: 'NRC'}, 
{startColumnName: 'overridePricingUsage', numberOfColumns: 2, titleText: 'Usage'} 
        ] 
       }); 


     }); <!-- end of getJSon() --> 
    });<!-- end of ready() -->  
</script> 

Если удалить следующие строки, я буду видеть мои данные в сетке хорошо, но с NO TREE.

treeGrid: true, 
treeGridModel: 'adjacency', 
treedatatype: "local", 
ExpandColumn: 'label', 

Может ли кто-нибудь помочь? Что я делаю не так?

Thanks

Answer 1

Я разрешил эту проблему. По-видимому, требуется, чтобы столбец id был фактически называться «id» и не управлялся моими данными. Я должен был изменить задний конец, чтобы правильно назвать имена. Кроме того, требовалось, чтобы объект данных был привязан к данным json, чтобы иметь метод getIsLeaf, а не как Java (back end) обычно создает getter для булевых объектов - только isLeaf(). Единственная проблема заключается в том, что дерево кажется немного кривым. если у меня есть две строки и развернуть первый, расширенное поддерево появляется под последним элементом сетки.

Обновленный код javascript находится здесь.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var mydata ; 
     $.getJSON('sources/cost-analyzer2.json', function(data){ 
      mydata=$.extend(true, [], data.results) ;   
      console.log(mydata); 

      $("#grid-results").jqGrid({ 
       datatype: "local", 
       data: mydata, // will not used at the loading, 
      // but during expanding/collapsing the nodes 
colNames:['Id', 'Description','Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 
     'Price Usage', 'Cost Usage', 
    'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage', 
     'Price MRC', 'Cost MRC','Price NRC', 'Cost NRC', 'Price Usage', 'Cost Usage' 
], 
colModel: [      
    { name: 'id', index: 'id', width: 20, hidden:true},   
    { name: 'label', index: 'label', width: 100}, 
    { name: 'standardPricingMRC', index: 'standardPricingMRC', width: 70}, 
    { name: 'standardCostingMRC', index: 'standardCostingMRC', width: 70}, 
    { name: 'standardPricingNRC', index: 'standardPricingNRC', width: 70}, 
    { name: 'standardCostingNRC', index: 'standardCostingNRC', width: 70}, 
    { name: 'standardPricingUsage', index: 'standardPricingMRC', width: 70}, 
    { name: 'standardCostingUsage', index: 'standardCostingMRC', width: 70}, 
    { name: 'proposedPricingMRC', index: 'proposedPricingMRC', width: 70}, 
    { name: 'proposedCostingMRC', index: 'proposedCostingMRC', width: 70}, 
    { name: 'proposedPricingNRC', index: 'proposedPricingNRC', width: 70}, 
    { name: 'proposedCostingNRC', index: 'proposedCostingNRC', width: 70}, 
    { name: 'proposedPricingUsage', index: 'proposedPricingMRC', width: 70}, 
    { name: 'proposedCostingUsage', index: 'proposedCostingMRC', width: 70}, 
    { name: 'overridePricingMRC', index: 'overridePricingMRC', width: 70}, 
    { name: 'overrideCostingMRC', index: 'overrideCostingMRC', width: 70}, 
    { name: 'overridePricingNRC', index: 'overridePricingNRC', width: 70}, 
    { name: 'overrideCostingNRC', index: 'overrideCostingNRC', width: 70}, 
    { name: 'overridePricingUsage', index: 'overridePricingMRC', width: 70}, 
    { name: 'overrideCostingUsage', index: 'overrideCostingMRC', width: 70} 
      ], 
       height:'auto', 
       //pager : "#ptreegrid", 
       sortname: 'id', 
       treeGrid: true, 
       treeGridModel: 'adjacency', 
       treedatatype: "local", 
       ExpandColumn: 'label', 
       caption: "Sample Tree View Model" 
      }); 

      $("#grid-results")[0].addJSONData({ 
       total: 1, 
       page: 1, 
       records: mydata.length, 
       rows: mydata 
      }); 
      $("#grid-results").jqGrid('gridResize'); 

     }); 
     }); 
</script> 

Любая идея, почему это так? Также кто-нибудь знает, были ли события реализованы на дереве Jqgrid?

Answer 2

Я исправил его для вас, пожалуйста, проверьте демо. Проблема заключалась в родительских идентификаторах, поскольку последние 4 записи указывались на первый узел, а не на 3. И вам нужно добавить поле id так, чтобы поле parent могло указывать на. Вот иерархия объектов, которую вам нужно настроить как:

Причина, по которой эти 2 элемента отображаются ниже второго элемента на первом уровне, потому что вы поместили данные после в 2-й элемент, вам просто нужно переместить его до этого 2-й предмет на первом уровне.

[ 
    { 
     "leaf":false, 
     "level":0, 
     "parent":"", 
     "rowId":36624, 
     id:36624, 
     expanded:true, 
     loaded:true 
    }, 
    { 
     "leaf":false, 
     "level":1, 
     "parent":36624, 
     "rowId":54130, 
     id:54130, 
     isLeaf:false 
    }, 
    { 
     "leaf":true, 
     "level":2, 
     "parent":54131, 
     "rowId":388316, 
     id:388316, 
     isLeaf:true, 
     expanded:false 
    }, 
    { 
     "leaf":true, 
     "level":2, 
     "parent":54131, 
     "rowId":404097, 
     id:404097, 
     isLeaf:true 
    }, 
    {      
     "leaf":false,  ---> This obj goes after the 2 before. 
     "level":1, 
     "parent":36624, 
     "rowId":54131, 
     id:54131, 
     isLeaf:false 
    }, 
    { 
     "leaf":true, 
     "level":2, 
     "parent":54131, 
     "rowId":404098, 
     id:404098, 
     isLeaf:true 
    }, 
    { 
     "leaf":true, 
     "level":2, 
     "parent":54131, 
     "rowId":404099, 
     id:404099, 
     isLeaf:true 
    } 
] 

Надеюсь, это поможет.

Demo