-1

我看过相关的问题 这个问题

并试图申请我的任务。我得到了网格的标题，上面有一些悬挂的气泡，上面写着“正在加载......”并且没有任何反应。当我运行控制台时，我看到一个错误，上面写着：

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

像这样：截屏

1) Oleg 提出的解决方案开箱即用。那是他的json和他的javascript。谢谢。
2) 我有一个 Json 数据，看起来与 Oleg 使用的数据相似。这里是

{
 "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>

如果我删除以下行，我会在网格中看到我的数据，但没有树。

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

任何人都可以帮忙吗？我究竟做错了什么？

谢谢

4

2 回答 2

1

我为你修好了，请查看演示。问题是最后 4 条记录的父 ID 指向第一个节点而不是第 3 个节点。并且您需要添加id字段，以便该parent字段可以指向。这是您需要配置为的对象层次结构：

之所以这两个项目显示在第一级的第二个项目下方是因为您将数据放在第二个项目之后，您只需将其移动到第一级的第二个项目之前。

[
   {
      "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

于 2013-08-06T05:19:23.780 回答
0

我已经解决了这个问题。显然，需要将 id 列实际称为“id”，而不是由我的数据驱动。我必须更改后端才能正确获取名称。此外，它要求映射到 json 数据的数据对象有一个方法getIsLeaf，而不是 Java（后端）通常如何为布尔值创建 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 - 树上实现？

于 2013-08-05T17:08:12.940 回答