2014-09-29 148 views
0

我在AngularJS环境中,试图让jqWidgets TreeGrid工作。JQWidgets treegrid with dataAdapter not rendering

我有dataAdapter所有与Json格式的数据连接,但网格呈现空的数据,但显示列(见附图)。

我使用这种非基于角演示为导向,以线了DataAdapter的:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtreegrid/index.htm#demos/jqxtreegrid/javascript-tree-grid-binding-to-json.htm

因为这个角样本过于简单(即不使用DataAdapter对象) -

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/angularjs/angularjs.htm

这里的HTML片段:

<div class="widget-content user"> 
    <jqx-treegrid jqx-instance="jqGridHierObj" jqx-settings="vm.jqGridHierSettings"> 
    </jqx-treegrid> 
</div> 

这是我的treegrid设置的外观,完整的数据和模型。

看来,JQ注入额外的“_source”属性,因为我当然不是。 还有一个额外的“localdata”属性。 EX /我已经添加了 “localData” 属性:

{ 
"altrows": true, 
"width": 600, 
"height": 300, 
"source": { 
    "_source": { 
     "datatype": "json", 
     "id": "id", 
     "datafields": { 
      "field0": { 
       "type": "string" 
      }, 
      "field1": { 
       "type": "number" 
      }, 
      "field2": { 
       "type": "number" 
      } 
     }, 
     "hierarchy": { 
      "keyDataField": { 
       "name": "id" 
      }, 
      "parentDataField": { 
       "name": "parent" 
      } 
     }, 
     "localData": [ 
      { 
       "id": 0, 
       "parent": 29, 
       "field0": "Goldman", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 1, 
       "parent": 29, 
       "field0": "IBM", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 2, 
       "parent": 29, 
       "field0": "JP Chase", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 3, 
       "parent": 34, 
       "field0": "MINESCONDIDA", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 4, 
       "parent": 29, 
       "field0": "Merrill", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 5, 
       "parent": 29, 
       "field0": "Nokia", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 6, 
       "parent": 29, 
       "field0": "Pequot", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 7, 
       "parent": 35, 
       "field0": "Pimco Fund A", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 8, 
       "parent": 35, 
       "field0": "Pimco Fund B", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 9, 
       "parent": 29, 
       "field0": "Deutsche", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 10, 
       "parent": 13, 
       "field0": "Ditech", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 11, 
       "parent": 32, 
       "field0": "GM Isuzu", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 12, 
       "parent": 32, 
       "field0": "GM Opel", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 13, 
       "parent": 32, 
       "field0": "GMAC", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 14, 
       "parent": 13, 
       "field0": "GMAC Insurance", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 15, 
       "parent": 0, 
       "field0": "GSAM", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 16, 
       "parent": 29, 
       "field0": "General Insurance", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 17, 
       "parent": 33, 
       "field0": "Genworth", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 18, 
       "parent": 29, 
       "field0": "AIG", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 19, 
       "parent": 29, 
       "field0": "Andor", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 20, 
       "parent": 29, 
       "field0": "BARCLAYS", 
       "field1": 92.7731197209214, 
       "field2": -10.1717767200607 
      }, 
      { 
       "id": 21, 
       "parent": 30, 
       "field0": "BHHSH", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 22, 
       "parent": 30, 
       "field0": "BHPBFIN", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 23, 
       "parent": 31, 
       "field0": "BHPSTEEUR", 
       "field1": 1468.80370935, 
       "field2": -161.395632863801 
      }, 
      { 
       "id": 24, 
       "parent": 31, 
       "field0": "BHPSUS", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 25, 
       "parent": 31, 
       "field0": "BLUESCOPEFIN", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 26, 
       "parent": 29, 
       "field0": "CSFB", 
       "field1": 3.35029024626419, 
       "field2": -0.367366071961442 
      }, 
      { 
       "id": 27, 
       "parent": 29, 
       "field0": "BLOSOFL", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 28, 
       "parent": 29, 
       "field0": "GRMOBND", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 29, 
       "field0": "$ALL$", 
       "field1": 1564.92711931719, 
       "field2": -171.934775655824 
      }, 
      { 
       "id": 30, 
       "parent": 34, 
       "field0": "BHPBGRP", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 31, 
       "parent": 34, 
       "field0": "BHPSTEELGRP", 
       "field1": 1468.80370935, 
       "field2": -161.395632863801 
      }, 
      { 
       "id": 32, 
       "parent": 29, 
       "field0": "GM", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 33, 
       "parent": 29, 
       "field0": "GE", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 34, 
       "parent": 29, 
       "field0": "BHPBMGRP", 
       "field1": 1468.80370935, 
       "field2": -161.395632863801 
      }, 
      { 
       "id": 35, 
       "parent": 29, 
       "field0": "PIMCO", 
       "field1": 0, 
       "field2": 0 
      } 
     ], 
     "localdata": [ 
      { 
       "id": 0, 
       "parent": 29, 
       "field0": "Goldman", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 1, 
       "parent": 29, 
       "field0": "IBM", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 2, 
       "parent": 29, 
       "field0": "JP Chase", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 3, 
       "parent": 34, 
       "field0": "MINESCONDIDA", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 4, 
       "parent": 29, 
       "field0": "Merrill", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 5, 
       "parent": 29, 
       "field0": "Nokia", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 6, 
       "parent": 29, 
       "field0": "Pequot", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 7, 
       "parent": 35, 
       "field0": "Pimco Fund A", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 8, 
       "parent": 35, 
       "field0": "Pimco Fund B", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 9, 
       "parent": 29, 
       "field0": "Deutsche", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 10, 
       "parent": 13, 
       "field0": "Ditech", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 11, 
       "parent": 32, 
       "field0": "GM Isuzu", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 12, 
       "parent": 32, 
       "field0": "GM Opel", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 13, 
       "parent": 32, 
       "field0": "GMAC", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 14, 
       "parent": 13, 
       "field0": "GMAC Insurance", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 15, 
       "parent": 0, 
       "field0": "GSAM", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 16, 
       "parent": 29, 
       "field0": "General Insurance", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 17, 
       "parent": 33, 
       "field0": "Genworth", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 18, 
       "parent": 29, 
       "field0": "AIG", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 19, 
       "parent": 29, 
       "field0": "Andor", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 20, 
       "parent": 29, 
       "field0": "BARCLAYS", 
       "field1": 92.7731197209214, 
       "field2": -10.1717767200607 
      }, 
      { 
       "id": 21, 
       "parent": 30, 
       "field0": "BHHSH", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 22, 
       "parent": 30, 
       "field0": "BHPBFIN", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 23, 
       "parent": 31, 
       "field0": "BHPSTEEUR", 
       "field1": 1468.80370935, 
       "field2": -161.395632863801 
      }, 
      { 
       "id": 24, 
       "parent": 31, 
       "field0": "BHPSUS", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 25, 
       "parent": 31, 
       "field0": "BLUESCOPEFIN", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 26, 
       "parent": 29, 
       "field0": "CSFB", 
       "field1": 3.35029024626419, 
       "field2": -0.367366071961442 
      }, 
      { 
       "id": 27, 
       "parent": 29, 
       "field0": "BLOSOFL", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 28, 
       "parent": 29, 
       "field0": "GRMOBND", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 29, 
       "field0": "$ALL$", 
       "field1": 1564.92711931719, 
       "field2": -171.934775655824 
      }, 
      { 
       "id": 30, 
       "parent": 34, 
       "field0": "BHPBGRP", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 31, 
       "parent": 34, 
       "field0": "BHPSTEELGRP", 
       "field1": 1468.80370935, 
       "field2": -161.395632863801 
      }, 
      { 
       "id": 32, 
       "parent": 29, 
       "field0": "GM", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 33, 
       "parent": 29, 
       "field0": "GE", 
       "field1": 0, 
       "field2": 0 
      }, 
      { 
       "id": 34, 
       "parent": 29, 
       "field0": "BHPBMGRP", 
       "field1": 1468.80370935, 
       "field2": -161.395632863801 
      }, 
      { 
       "id": 35, 
       "parent": 29, 
       "field0": "PIMCO", 
       "field1": 0, 
       "field2": 0 
      } 
     ]  
    }, 
    "_options": {}, 
    "records": [], 
    "_downloadComplete": [], 
    "_bindingUpdate": [] 
}, 
"columns": [ 
    { 
     "dataField": "field0", 
     "text": "Counterparty" 
    }, 
    { 
     "dataField": "field1", 
     "text": "SUM(CDSStress A:USD 10Y X -1.25)" 
    }, 
    { 
     "dataField": "field2", 
     "text": "SUM(CDSStress A:USD 10Y X 1.25)" 
    } 
] 
} 

,并在我的控制器代码,网格功能:

function initHierarchyGrid_Generic(reportType, isHierarchy, isDynamic) { 

     isDynamic = (isDynamic == undefined ? false : isDynamic); 
     if (isDynamic) { 
      // in this case we have saved everything to $rootScope 
      myModel = $rootScope.reptWizard.modelDef; 
      myColumns = $rootScope.reptWizard.colDefs; 
      myData = $rootScope.reptWizard.aggrResults; 
     } 
     // add Json data onto myModel object; define jqWidgets data adapter 
     myModel["localData"] = myData; 
     var dataAdapter = new $.jqx.dataAdapter(myModel); 

     var ds = { 
      schema: { 
       model: myModel 
      }, 
      pageSize: 10,     
      data: dataAdapter 
     }; 
     $scope.jqGridHierObj = {};  // object reference 
     vm.jqGridHierSettings = {  // jqwidgets grid 
      altrows: true, 
      width: 600, 
      height: 300, 
      source: myData, 
      columns: myColumns 
     }; 
     return vm.jqGridHierSettings; 
} 

* UPDATE *

我好像我的DataAdapter定义会导致localData数据数组嵌套在其对象中。这里是我在f12控制台工具中找到localData的地方。它必须是错误的:

*更新2 * 试图获得的jsfiddle工作,但有一点麻烦:

http://jsfiddle.net/L9530s43/2/

nested localData

 vm.jqGridHierSettings.source._source.source._source.localData 

empty tree grid

回答

1

可能是问题在于你也不使用dataAdapter。设置对象的source属性指向myData,而不是dataAdapter

+0

我实际上有一个内联if语句,并且在尝试省略一些无关代码时在这篇文章中犯了一个错误。我在这篇文章中将'data'属性更改为'dataAdapter'。在我的实际代码中,它正确地指向了dataAdapter。 – 2014-09-29 11:44:54

+0

我更新了我的帖子,以显示我在dataAdapater对象中找到'localData'的位置,这似乎是错误的 - vm.jqGridHierSettings.source._source.source._source.localData – 2014-09-29 12:07:43