AngularJS UI網格排序不適用於嵌套對象

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

Screenshot

有三名的姓名，年齡和房屋。排序只適用於名稱和年齡欄，而不適用於房屋（因爲它是嵌套用戶 - >地址 - >房屋）

我該如何處理這種情況？在此先感謝....

來源

2017-06-20 Swapnil

在columnDefs指定field: 'address.house'。它應該做的伎倆。您的最終columnDefs將如下所示：

columnDefs: [ 
    { field: 'name', cellTemplate: template1}, 
    { field: 'age', cellTemplate: template2}, 
    { field: 'address.house', cellTemplate: template3} 
]

來源

2017-06-20 14:56:34 xReeQz

感謝您的回覆。它正在工作如果我有JSON格式的數據。但如何處理相同的情況如果數據是Javascript對象＆它嵌套了對象數組，並且其中一列正在呈現嵌套對象變量。例如我有模板，如 var template3 ='

'，應將什麼值分配給columnDef中的字段。我試過地址[index] .house，但它不工作。注意：我不想將JavaScript對象轉換爲JSON。 – Swapnil

假設你想通過嵌套數組的第一個地址對'House'列進行排序，你可以設置'field：'address [0] .house''。但是，如果您需要顯示所有地址並按'house'整理整個數據集，那麼實現這一目標的唯一方法就是平整您的數據集。 – xReeQz

AngularJS UI網格排序不適用於嵌套對象

回答

相關問題