Come utilizzare ExternalSorting in ng-grid, con un $ watch su sortInfo?

Question

Ho le seguenti impostazioni per la mia ng-grid nel mio codice:

$scope.gridOptions = { 
    ... 
    useExternalSorting : false, 
} 

$scope.watch('gridOptions.ngGrid.config.sortInfo', function (oldValue, newValue) { 
    console.log(newValue) 
}) 

Ho anche provato ad utilizzare sortInfo : undefined e $watch(gridOptions.sortInfo). Questo sembra funzionare solo quando la griglia inizialmente viene caricata. Dopodiché, quando clicco sulle colonne di intestazione, sembra che non entri nella funzione di callback per lo $watch. Ho provato a mettere un debugger all'interno della funzione di callback che attiva l'ordinamento, e ho potuto vedere il codice che aggiorna l'array sortInfo con le giuste informazioni, tuttavia non sembra andare all'interno della funzione di callback per l'istruzione watch. C'è qualcosa di sbagliato nella mia configurazione? Ho un Plunker here con qualcosa di simile a quello che sto cercando di fare.

Answer 1

Ho avuto lo stesso problema. Volevo eseguire il mio ordinamento sul lato server, ma utilizzare ancora l'oggetto sortInfo che viene aggiornato quando si fa clic sulle intestazioni di colonna. Dopo aver esaminato alcuni errori nella console, ho scoperto che ho dovuto impostare un default sortInfo in questo modo:

$scope.gridOptions = { ... sortInfo: { fields: [], columns: [], directions: [] }, useExternalSorting: true }

non sono sicuro perché il campo columns è necessaria e non corrisponde alla documentazione . Sto usando AngularJS v1.2.19 e ng-grid v2.0.11. Non certo perché si deve useExternalSorting insieme a false, ma in entrambi i casi si dovrebbe ora essere in grado di impostare un orologio su quel campo come questo:

$scope.$watch('gridOptions.sortInfo', function (newVal, oldVal) { console.log(newVal); }, true);

Answer 2

Se si ha realmente bisogno di guardare i cambiamenti di ordinamento è possibile utilizzare il seguente:

//default sorting 
    $scope.sortOptions = { 
    sortfield: "name", 
    sortdir: "DESC" 
    }; 

    //on sorting event fill out sortOptions in scope 
    $scope.$on('ngGridEventSorted', function(event, data) { 
    $scope.sortOptions.sortfield = data.fields[0]; 
    $scope.sortOptions.sortdir = data.directions[0]; 

    }); 

    //when sortOption changes do something 
    $scope.$watch('sortOptions', function(newVal, oldVal) { 
    if (newVal !== oldVal) { 
     console.log("ngGrid Field: " + $scope.sortOptions.sortfield + " - Direction: " + $scope.sortOptions.sortdir); 
    } 
    }, true); 

che utilizza l'evento sorta di compilare il sortinfo nell'ambito che è guardato e gli incendi quando cambia. Plunker here

Oppure, meno complicato, il fuoco direttamente sulla manifestazione sorta e risparmiarsi la noia guardando 8- \

//on sorting event do something 
$scope.$on('ngGridEventSorted', function(event, data) { 
    console.log("ngGrid Field: " + data.fields[0] + " - Direction: " +data.directions[0]); 
}); 

Another plunker

Answer 3

ho ottenuto ordinamento esterno lavorare un po 'diverso, allora il post che ho visto qui finora.

$scope.gridOptions = { 
       paginationPageSize: 100, 
       enableSorting: true, 
       useExternalSorting: true, 
       enableGridMenu: false, 
       enableColumnMenus: false, 
       showFooterRow: true, 
       enableFiltering: true, 
       useExternalPagination: true, 
       enableRowSelection: true, 
       noUnselect: true, 
       multiSelect: false, 
       enableRowHeaderSelection: false, 
       onRegisterApi: function(gridApi) { 
        $scope.gridApi = gridApi; 
        gridApi.core.on.sortChanged($scope, (grid, sortColumns) => { 
        var sortColumn = sortColumns[0].field;    
        var sortDirection = sortColumns[0].sort.direction; 
        // then I call a method in my controller which hits my server 
        // side code and returns external sorting through a linq query 
        $scope.UpdateGrid(sortColumn, sortDirection); 
        }); 
       }, //onRegisterApi 
    }; // gridOptions