如何使用angularjs在ui网格中选择服务器端筛选项？

我有一个ui网格表，它是通过服务器端过滤实现的，现在我有一个场景，我正在从另一个页面传递api中的过滤项，并带着网格的过滤数据来到ui网格页面，但没有应用该列的过滤器选择

代码：

样品柱def

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';
                        }
             };

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

提前谢谢

我得概述一下我认为你在寻找什么。它基于，但将存储的数据量缩减到列数组（每个列对象都包含过滤器）。要进行测试，请向筛选器标题中添加一些筛选器内容，然后保存状态。”X'过滤器退出，点击恢复，过滤器返回

下面，我概述了一些关于使用此阵列“做什么”的想法

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

指令被“列出”以确保其突出

  <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>

加载第二个页面时，您可以通过以下方式检索数据：

// 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'
            })
          }
        }
      })

本地存储

第二种方法是使用服务将数据保存在本地。本文提供的答案完美地总结了这一模式，因此无需在此重复。

我必须概述我认为您正在寻找的内容。它基于，但将存储的数据量缩减到列数组（每个列对象都包含过滤器）。要进行测试，请向筛选器标题中添加一些筛选器内容，然后保存状态。”X'过滤器退出，点击恢复，过滤器返回

下面，我概述了一些关于使用此阵列“做什么”的想法

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

指令被“列出”以确保其突出

  <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>

加载第二个页面时，您可以通过以下方式检索数据：

// 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'
            })
          }
        }
      })

本地存储

---

第二种方法是使用服务将数据保存在本地。中提供的答案完美地总结了此模式，因此不需要在此处复制。

ui网格使用$$hashkey跟踪所选项目。一旦您执行服务器端筛选，您将获得新的$$hashkey，因此选择将丢失。在获取筛选数据后跟踪并应用它的任何其他方法使用以下方法对筛选器进行筛选：。一旦熟悉了格式，您也应该能够构建状态。我希望我仍然有代码，但是已经构建了一个函数，允许用户将他们的过滤器、列等保存到后端服务。可以这样做，也可以将其存储在会话中，具体取决于您希望“权重”的位置。ui-grid正在使用$$hashkey跟踪所选项目。一旦您执行服务器端筛选，您将获得新的$$hashkey，因此选择将丢失。在获取筛选数据后跟踪并应用它的任何其他方法使用以下方法对筛选器进行筛选：。一旦熟悉了格式，您也应该能够构建状态。我希望我仍然有代码，但是已经构建了一个函数，允许用户将他们的过滤器、列等保存到后端服务。可以这样做，也可以将其存储在会话中，具体取决于您希望“重量”的位置；我唯一的疑问是，当我没有为表保存状态时，首先有人尝试过滤附加了默认必须选择的筛选值的数据，清除该值时，应转到新数据。（请记住，过滤时的数据是服务器端每页过滤）很抱歉，我仍然对您尝试执行的操作感到困惑。我的示例演示了如何将状态保存到服务器。你是说如果用户不过滤任何内容，你想在默认情况下保存一个空状态吗？你好，布莱恩，谢谢你的回答；我唯一的疑问是，当我没有为表保存状态时，首先有人尝试过滤附加了默认必须选择的筛选值的数据，清除该值时，应转到新数据。（请记住，过滤时的数据是服务器端每页过滤）很抱歉，我仍然对您尝试执行的操作感到困惑。我的示例演示了如何将状态保存到服务器。您是说如果用户不过滤任何内容，您希望在默认情况下保存空状态吗？