Comment utiliser ExternalSorting dans ng-grid, avec $ watch sur sortInfo?

Question

J'ai les paramètres suivants pour ma grille-ng dans mon code:

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

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

J'ai aussi essayé d'utiliser sortInfo : undefined et $watch(gridOptions.sortInfo). Cela ne semble fonctionner que lorsque le réseau se charge initialement. Après cela, quand je clique sur les colonnes d'en-tête, il ne semble pas aller à l'intérieur de la fonction de rappel pour le $watch. J'ai essayé de mettre un débogueur dans la fonction de rappel qui déclenche le tri, et j'ai pu voir le code mettre à jour le tableau sortInfo avec les bonnes informations, mais il ne semble pas aller dans la fonction de rappel pour l'instruction watch. Y a-t-il quelque chose d'incorrect dans ma configuration? J'ai un Plunker here avec quelque chose de similaire à ce que j'essaie de faire.

Answer 1

J'ai eu le même problème. Je voulais faire mon propre tri côté serveur mais toujours utiliser l'objet sortInfo qui est mis à jour lorsque les en-têtes de colonnes sont cliqués. Après avoir examiné quelques erreurs dans la console, je trouve que je devais définir un défaut sortInfo comme ceci:

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

Je ne sais pas pourquoi le champ columns est nécessaire et il ne correspond pas à la documentation . J'utilise AngularJS v1.2.19 et ng-grid v2.0.11. Je ne sais pas pourquoi vous avez useExternalSorting ensemble à false mais de toute façon, vous devriez maintenant être en mesure de mettre une montre sur ce champ comme ceci:

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

Answer 2

Si vous avez vraiment besoin de regarder les changements de tri que vous pouvez utiliser les éléments suivants:

//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); 

qui utilise l'événement de tri pour remplir le SortInfo dans le champ qui est observé et les feux quand il change. Plunker here

Ou, feu moins compliqué directement sur l'événement de tri et de vous épargner le ennuyeux regarder 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

Je suis arrivé le tri externe de travail un peu différent alors le poste que j'ai vu ici jusque là.

$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