我在 AngularJS 环境中,并试图让 jqWidgets TreeGrid 工作。
我将 dataAdapter 全部与 Json 格式的数据连接起来,但是网格呈现空数据但显示列(参见附图)。
我使用这个非基于 Angular 的演示作为连接 dataAdapter 的指南:
因为这个 Angular 示例太简单了(即不使用 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>
这是我的树形网格设置的样子,包含数据和模型。
看来 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;
}
* 更新 *
我似乎我的 dataAdapter 定义导致 localData 数据数组嵌套在它们的对象中。这是我在 f12 控制台工具中找到 localData 的地方。一定是错的:
* 更新 2 * 试图让 jsfiddle 工作,但遇到了一些麻烦:
http://jsfiddle.net/L9530s43/2/
vm.jqGridHierSettings.source._source.source._source.localData