AngularJS UI 网格排序不适用于嵌套对象



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

最新更新