在ag-grid中显示嵌套的json

Question

在ag-grid中显示嵌套的json

man*_*ath 5 javascript json angularjs angular-grid

我正在使用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
}
}]);

Run Code Online (Sandbox Code Playgroud)

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

mik*_*nie 6

ag-grid 字段属性只能引用数据行的属性，但是valueGetter属性允许表达式。所以，虽然

field: 'defaultColumns1.region'

无法使用，请切换至

valueGetter: 'data.defaultColumns1.region'

会很好的工作。您的分叉式样车示例在http://plnkr.co/edit/8enzrjt2MQwfa8VjGaIy?p=preview

Answer 2

Jax*_*Jax 0

您浏览数据的方式存在一些问题。$scope.myData 是一个对象数组，因此您需要对其进行迭代或按索引挖掘数据。另外你的 $scope.gripOptions 也不太正确。我刚刚关注了ag-grid 文档

看看这个更新后的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
};

Run Code Online (Sandbox Code Playgroud)

看一下 $scope.gridOptions 现在的构造方式（如文档中建议的那样。）

希望能帮助到你。

归档时间：	10 年，4 月前
查看次数：	7908 次
最近记录：	6 年，12 月前