我在AngularJS环境中,试图让jqWidgets TreeGrid工作。JQWidgets treegrid with dataAdapter not rendering
我有dataAdapter所有与Json格式的数据连接,但网格呈现空的数据,但显示列(见附图)。
我使用这种非基于角演示为导向,以线了DataAdapter的:
因为这个角样本过于简单(即不使用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/
vm.jqGridHierSettings.source._source.source._source.localData
我实际上有一个内联if语句,并且在尝试省略一些无关代码时在这篇文章中犯了一个错误。我在这篇文章中将'data'属性更改为'dataAdapter'。在我的实际代码中,它正确地指向了dataAdapter。 – 2014-09-29 11:44:54
我更新了我的帖子,以显示我在dataAdapater对象中找到'localData'的位置,这似乎是错误的 - vm.jqGridHierSettings.source._source.source._source.localData – 2014-09-29 12:07:43