私は AngularJS 環境にいて、jqWidgets TreeGrid を機能させようとしています。
dataAdapter をすべて Json 形式のデータに接続していますが、グリッドは空のデータをレンダリングしますが、列を表示します (添付の画像を参照)。
dataAdapter を接続するためのガイドとして、この非 Angular ベースのデモを使用しています。
この 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 を見つけました。それは間違っているに違いない:
* UPDATE 2 * jsfiddle を動作させようとしていますが、少し問題があります:
http://jsfiddle.net/L9530s43/2/
vm.jqGridHierSettings.source._source.source._source.localData
