如何在 angular ui-grid 中禁用客户端排序？

Question

我有两个问题。

我想在 ui-grid 中禁用客户端排序，我该怎么做？
不是客户端排序，我需要将另一个数据集设置为ui-grid并刷新数据集。

scope.gridOptions.data = res;

scope.gridApi.core.refresh();

首先 link 我正在尝试将新数据分配给 ui-grid 并刷新 ui-grid。这不起作用？我该怎么做？

谢谢

Answer 1

为了禁用ui网格的客户端排序，您需要在网格定义上设置enableSorting: false。

<!doctype html>
<html ng-app="app">

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.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">
</head>

<body>

    <div ng-controller="MainCtrl">

        <div id="grid1" ui-grid="gridOptions1" class="grid"></div>
        <button ng-click="resetGrid()">Reset</button>
    </div>


    <script>
        var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

        app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
            $scope.gridOptions1 = {
                enableSorting: false,
                columnDefs: [
                    {
                        field: 'name'
                    },
                    {
                        field: 'gender'
                    },
                    {
                        field: 'company'
                    }
                ],
                onRegisterApi: function (gridApi) {
                    $scope.grid1Api = gridApi;
                }
            };

            $scope.toggleGender = function () {
                if ($scope.gridOptions1.data[64].gender === 'male') {
                    $scope.gridOptions1.data[64].gender = 'female';
                } else {
                    $scope.gridOptions1.data[64].gender = 'male';
                };
                $scope.grid1Api.core.notifyDataChange(uiGridConstants.dataChange.EDIT);
            };


            $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
                .success(function (data) {
                    $scope.gridOptions1.data = data;
                });

            $scope.resetGrid = function () {
                $scope.gridOptions1.data = [
                    {
                        'company': "Company1",
                        'gender': "gender1",
                        'name': "name1"
               },
                    {
                        'company': "Company2",
                        'gender': "gender2",
                        'name': "name2"
               }
             ];
            }

          }]);
    </script>
</body>

</html>

为了刷新数据集，您需要重置网格的数据源，即需要将新数据源设置为$scope.gridOptions1.data

Answer 2

只需将属性 enableSorting = false 设置为即可解决您的排序问题。

enableSorting:false

Answer 3

对于您的第一个问题，要禁用 ui-grid 的客户端排序，您需要在 gridOptions 中将此标志设置为 false，如下所示：

scope.gridOptions.enableSorting: false;

对于你的第二个问题，要通过重新设置网格数据来改变你的视图，请尝试在之后添加此行：

scope.$apply

如何在 angular ui-grid 中禁用客户端排序？

How to disable client side sorting in angular ui-grid?

javascript

angularjs

angular-ui

angular-ui-grid

ui-grid