Question

我有一个使用服务器端过滤实现的ui-grid表，现在我有一个场景，我从另一个页面传递我的api中的过滤术语，并带着过滤后的数据进入ui-grid页面对于网格，但不应用该列的过滤器选择。

代码：

$scope.gridOptions = {
                enableSelectAll: false,
                exporterCsvFilename: fileNm,
                exporterMenuPdf: false,
                enableFiltering: true,
                showGridFooter: true,
                paginationPageSizes: [25, 50, 75],
                paginationPageSize: 25,
                useExternalPagination: true,
                enableGridMenu: true,
..
..
.

示例columnDef

var sparableColumn =  {
                        name: 'sparable', displayName: 'Sparable', headerCellClass: $scope.highlightFilteredHeader,

                        filter: {
                            type: uiGridConstants.filter.SELECT,
                            selectOptions: $scope.sparableFilter
                        },

                        cellTemplate:'<div ng-if="row.entity.sparable" class="tcenter">{{row.entity.sparable}}</div><div ng-if="!row.entity.sparable"></div>',
                        cellClass: function (grid, row, col) {
                            if (grid.getCellValue(row, col) === 'NO') {
                                return 'red tcenter';
                            } 
                            if(grid.getCellValue(row, col) === 'YES') {
                                return 'green tcenter';
                            } 
                            return 'tcenter';
                        }
             };

onRegisterApi内的服务器端过滤器：

onRegisterApi: function (gridApi) {
                    $scope.gridApi = gridApi;

                    $scope.gridApi.core.on.filterChanged( $scope, function() {
                         var grid = this.grid;
                         $scope.serversideFilters = [];
                        angular.forEach(grid.columns, function(value, key) {
                            if(value.filters[0].term) {
                                var dummy = {};
                                console.log('FILTER TERM FOR ' + value.colDef.name + ' = ' + value.filters[0].term);
                                dummy['k'] = value.colDef.name;
                                dummy['v'] = value.filters[0].term;
                                $scope.serversideFilters.push(dummy);
                            }
                        });
                        getPage();
                    });

我知道我们需要通过grid.columns.filters填充或选择它，但是如何以及在何处放置代码以激活已过滤的列选择是问题。

提前致谢！

Answer 1

我put together a plnkr概述了我认为您正在寻找的内容。它基于ui-grid tutorial on Saving State，但会将您存储的数据量减少到columns数组（其中每个列对象包含过滤器）。要进行测试，请将一些过滤器内容添加到过滤器标头中，然后保存状态。＆＃39; X＆＃39;过滤掉，点击恢复，过滤器又回来了。

在下面，我已经概述了一些关于＆＃34;做什么的想法＆＃34;用这个数组。

<强> JS

此代码来自上述教程，稍作修改以避免存储额外数据。

请注意$ scope.gridOptions.saveFilter = true。 save *选项已设置为false，以避免任何额外的数据处理。

// ensure
var app = angular.module('app', ['ui.grid', 'ui.grid.saveState']);

// left out extra code for brevity

var columns = [];
  $scope.saveState = function() {
    var saved = $scope.gridApi.saveState.save();
    columns = saved.columns;
    console.log('columns', columns);
  };

  $scope.restoreState = function() {
    $scope.gridApi.saveState.restore($scope, {
      columns: columns
    });
  };

<强> HTML

指令已列出＆＃34;列出＆＃34;确保它们脱颖而出。

  <div class="grid" ui-grid="gridOptions" ui-grid-save-state>

  <button id="save" type="button" class="btn btn-success"
      ng-click="saveState()">Save</button>
  <button id="restore" type="button" class="btn btn-success"
      ng-click="restoreState()">Restore</button>

存储数组

根据您处理导航的方式，您可以查看 $ routeChangeStart ，并调用 saveState（）：

$scope.$on('$routeChangeStart', function(next, current) {
   // Serialize, post/put, etc here
});

加载第二页时，您可以检索数据，如下所示：

// app.config
$routeProvider.
      when('/page2', {
        templateUrl: 'page_2.tpl.htm',
        controller: 'Page2Controller',
        resolve: {
          gridFilters: function($http){
            // We must return something with a promise. $http already does that, so does $resource.
            // See: https://docs.angularjs.org/api/ng/service/$q
            return $http({
              method: 'GET',
              url: '/api/resource/with/grid/settings'
            })
          }
        }
      })

本地存储

第二种方法是使用服务在本地保存数据。 passing-data-between-controllers-in-angular-js中提供的答案完美地总结了这种模式，因此无需在此复制。

如何使用angularjs在ui-grid中选择服务器端过滤的项目？

1 个答案: