Question

我的代码中的ng-grid有以下设置：

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

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

我还尝试使用sortInfo : undefined和$watch(gridOptions.sortInfo)。这似乎仅在网格最初加载时才起作用。之后，当我点击标题列时，它似乎不会进入$watch的回调函数。我尝试在回调函数中放置一个调试器来触发排序，我可以看到代码用正确的信息更新sortInfo数组，但是它似乎没有进入watch语句的回调函数。我的设置有什么不对吗？我有Plunker here类似于我尝试做的事情。

Answer 1

我遇到了同样的问题。我想进行自己的服务器端排序，但仍然使用单击列标题时更新的sortInfo对象。在查看控制台中的一些错误后，我发现我必须像这样设置默认的sortInfo：

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

我不确定为什么columns字段是必要的，并且它与文档不匹配。我使用的是AngularJS v1.2.19和ng-grid v2.0.11。不确定为什么useExternalSorting设置为false，但无论哪种方式，您现在应该可以像这样在该字段上设置监视：

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

Answer 2

如果您确实需要观看排序更改，可以使用以下内容：

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

使用sort事件来填充观察范围内的sortinfo，并在其发生变化时触发。 Plunker here

或者，不那么复杂，直接在排序事件上开火，让自己无聊看着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

我的外部排序工作与我到目前为止看到的帖子有点不同。

    $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

如何在ng-grid中使用ExternalSorting，在sortInfo上使用$ watch？

3 个答案: