在ag-grid中显示嵌套的json
在ag-grid中显示嵌套的json
提问于 2015-09-30 16:43:42
我正在使用Angular Grid (ag-grid)来显示数据。我正在尝试在我的角度网格中显示嵌套的json数据。但我没有成功。
下面是示例json数据和colDefs。请建议为什么点运算符不像jqgrid那样工作，将网格列映射到嵌套的json字段。
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>回答 2
Stack Overflow用户
回答已采纳
发布于 2015-10-01 16:17:57
你浏览数据的方式有一些问题。$scope.myData是一个对象数组，因此您需要对其进行迭代或按索引挖掘数据。另外，您的$scope.gripOptions也不太正确。我只是跟着ag-grid docs
看看这个更新的plunker。代码非常简单，但我认为它做的正是您想要的。您可以随时创建一个函数来迭代数组(将其保留为家庭作业：-)
$scope.myData = [{
"defaultColumns1": {
"region": "PA"
},
"defaultColumns2": {
"LocationName": "loc1",
"LegalName": "legName1"
},
"name": "name1"
}, {
"defaultColumns1": {
"region": "PB"
},
"defaultColumns2": {
"LocationName": "loc2",
"LegalName": "legName2"
},
"name": "name2"
}];
var columnDefs = [{
headerName: 'Region',
field: 'region'
}, {
headerName: 'Location',
field: 'location'
}, {
headerName: 'Legal name',
field: 'legal_name'
}]
var rowData = [{
region: $scope.myData[0].defaultColumns1.region,
location: $scope.myData[0].defaultColumns2.LocationName,
legal_name: $scope.myData[0].defaultColumns2.LegalName
}, {
region: $scope.myData[1].defaultColumns1.region,
location: $scope.myData[1].defaultColumns2.LocationName,
legal_name: $scope.myData[1].defaultColumns2.LegalName
}, ]
$scope.gridOptions = {
columnDefs: columnDefs,
rowData: rowData
};看看$scope.gridOptions现在的构造方式(如文档中所建议的)。
希望能有所帮助。
Stack Overflow用户
发布于 2016-04-24 17:32:45
ag-grid字段属性只能引用数据行的属性，但valueGetter属性允许表达式。所以，虽然
field: 'defaultColumns1.region'
将不起作用，切换到
valueGetter: 'data.defaultColumns1.region'
都会工作得很好。你的样品柱塞在http://plnkr.co/edit/8enzrjt2MQwfa8VjGaIy?p=preview上。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32861673
复制相关文章
相似问题
腾讯云开发者
