Pregunta ¿Cómo usar ExternalSorting en ng-grid, con un $ watch en sortInfo?


Tengo la siguiente configuración para mi ng-grid en mi código:

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

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

También intenté usar sortInfo : undefined y $watch(gridOptions.sortInfo). Esto parece funcionar solo cuando la cuadrícula se carga inicialmente. Después de eso, cuando hago clic en las columnas del encabezado, no parece ir dentro de la función de devolución de llamada para el $watch. Intenté colocar un depurador dentro de la función de devolución de llamada que activa el ordenamiento, y pude ver el código que actualiza la matriz sortInfo con la información correcta, sin embargo, no parece ir dentro de la función de devolución de llamada para la declaración de observación. ¿Hay algo incorrecto con mi configuración? tengo un Plunker aquí Con algo similar a lo que estoy tratando de hacer.


5
2018-06-09 16:06


origen


Respuestas:


Yo tuve el mismo problema. Quería hacer mi propia clasificación del lado del servidor pero aún así usar el sortInfo Objeto que se actualiza cuando se hace clic en los encabezados de columna. Después de ver algunos errores en la consola, encontré que tenía que establecer un valor predeterminado sortInfo al igual que:

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

No estoy seguro de por qué columns El campo es necesario y no coincide con la documentación. Estoy usando AngularJS v1.2.19 y ng-grid v2.0.11. No estoy seguro de por qué tienes useExternalSorting ajustado a false pero de cualquier manera, ahora deberías poder establecer una vigilancia en ese campo así:

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


6
2017-10-18 03:16



Si realmente necesita ver los cambios de clasificación, puede usar lo siguiente:

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

Que utiliza el evento de clasificación para completar la información de clasificación en el ámbito que se vigila y dispara cuando cambia. Plunker aquí

O, menos complicado, dispare directamente al evento de clasificación y ahórrese la observación aburrida 8- \

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

Otro plunker


4
2018-06-10 09:10



Tengo una clasificación externa que funciona un poco diferente de la publicación que he visto aquí hasta ahora.

    $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 

1
2018-02-24 15:48