6

Angular Grid (ag-grid) を使用してデータを表示しています。角度グリッドにネストされた json データを表示しようとしています。しかし、私は失敗しました。

以下は、サンプルの json データと colDefs です。ネストされたjsonフィールドでグリッド列をマップするために、jqgridとは異なり、ドット演算子が機能しない理由を提案してください。

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.myData = [{
"defaultColumns1": {"region":"PA"},
"defaultColumns2": {"LocationName": "loc1",
"LegalName": "legName1"
}
},
{
"defaultColumns1": {"region":"PB"},
"defaultColumns2": {"LocationName": "loc2",
"LegalName": "legName2"
}
}];

$scope.gridOptions = {
  data: 'myData',
  columnDefs: [{
    field: 'defaultColumns1.region',
    displayName: 'Region'
  }, {
    field: 'defaultColumns2.LocationName',
    displayName: 'Location',
    headerGroup: 'address'
  }, {
    field: 'defaultColumns2.LegalName',
    displayName: 'Legal Name',
    headerGroup: 'address'
  }],
  enableColumnResize: true,
  groupHeaders : true
}
}]);

index.html

<!DOCTYPE html>
<html ng-app="myApp">

<head lang="en">
<meta charset="utf-8" />
<title>Custom Plunker</title>
<link  rel="stylesheet" href="../dist/ag-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.js">   </script>
<script src="http://code.angularjs.org/1.2.15/angular.js"></script>
<script  src="../dist/ag-grid.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"   rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="main.js"></script>
</head>

<body ng-controller="MyCtrl">
<div class="gridStyle" ag-grid="gridOptions"></div>
</body></html>
4

2 に答える 2

10

ag-gridフィールド属性はデータ行のプロパティのみを参照できますが、valueGetter属性は式を許可します。だから、その間

field: 'defaultColumns1.region'

動作しません、に切り替えます

valueGetter: 'data.defaultColumns1.region'

うまくいきます。あなたのものから分岐したプランカーのサンプルはhttp://plnkr.co/edit/8enzrjt2MQwfa8VjGaIy?p=previewにあります

于 2016-04-24T09:32:44.590 に答える