我正在使用AngularJS UI网格以网格格式显示我的数据。但是,排序不适用于嵌套对象列。对于其余列(对于非嵌套对象(,排序工作正常。下面是代码片段。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Sorting Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid"]);
app.controller("uigridCtrl", function ($scope) {
var template1 ='<div ><span >{{row.entity.name}}</span></div>';
var template2 ='<div ><span >{{row.entity.age}}</span></div>';
var template3 ='<div ><span >{{row.entity.address.house}}</span></div>';
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name', cellTemplate: template1},
{ field: 'age', cellTemplate: template2},
{ field: 'house', cellTemplate: template3}
],
onRegisterApi: function (gridApi) {
$scope.grid1Api = gridApi;
}
};
$scope.users = [
{ name: "Anup K", age: 10, 'address': {'house': '34','street': 'MG Road','city': 'Pune'} },
{ name: "Suresh Kumar", age: 30, 'address': {'house': '12','street': 'Brigade Road','city': 'Bangalore'} },
{ name: "Rohini Shah", age: 29, 'address': {'house': '18','street': 'AB Road','city': 'Mumbai'} },
{ name: "Mohan Alavala", age: 25, 'address': {'house': '50','street': 'Gulmohar Road','city': 'Delhi'} },
{ name: "Atul M", age: 27, 'address': {'house': '3','street': 'Charminar Road','city': 'Hydrabad'} }
];
$scope.gridOptions.data = $scope.users;
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 230px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Sorting Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="gridOptions" class="myGrid"></div>
</div>
</body>
</html>
截图
有三列名称,年龄和房屋。排序仅适用于名称和年龄列,不适用于房屋(因为它是嵌套用户->地址->房子(
如何处理这种情况? 提前谢谢....
在columnDefs
中指定field: 'address.house'
。它应该可以解决问题。您的最终columnDefs
将如下所示:
columnDefs: [
{ field: 'name', cellTemplate: template1},
{ field: 'age', cellTemplate: template2},
{ field: 'address.house', cellTemplate: template3}
]