过滤时如何防止ui-grid调整列的大小？

Question

我有一个问题，其中在ui网格中进行过滤会导致列宽被重置。 我已经将网格状态保存到本地存储中，并且该问题仅在手动调整任何列大小之前才在第一次加载时发生。 手动调整了列的大小后，过滤不再导致列宽被重置。

此处的链接器： http ://plnkr.co/edit/LAMZvOkpx6jsD4CWSz04?p=preview

（也在本博文中引用： angular ui网格保存和恢复状态 ）

'use strict';

angular.module('grid-demo', [
  'LocalStorageModule',
  'ui.grid',
  'ui.grid.selection',
  'ui.grid.resizeColumns',
  'ui.grid.autoResize',
  'ui.grid.moveColumns',
  'ui.grid.grouping',
  'ui.grid.saveState',
])
.config(function ($httpProvider, localStorageServiceProvider) {
  localStorageServiceProvider
    .setPrefix('grid-demo')
    .setStorageType('localStorage')
    .setNotify(true, true); // Not sure what this setting does
})

.controller('MainCtrl', function ($rootScope, $scope, $http, $window, $timeout, uiGridConstants, localStorageService) {

  $scope.gridOptions = {
    data: [
      { name: 'Jack', title: 'manager', phone: '123456789', location: 'india'},
      { name: 'Suzy', title: 'developer', phone: '465189798', location: 'usa'},
      { name: 'George', title: 'secretary', phone: '82656517', location: 'japan'},
      { name: 'Michael', title: 'analyst', phone: '31321687', location: 'egypt'},
      { name: 'Sara', title: 'consultant', phone: '59595847', location: 'germany'},
      { name: 'Chris', title: 'engineer', phone: '789456123', location: 'russia'},
      { name: 'Elizabeth', title: 'clerk', phone: '963852741', location: 'china'},
      { name: 'Jane', title: 'intern', phone: '147258369', location: 'australia'},
      { name: 'Bill', title: 'accountant', phone: '951487623', location: 'brazil'}
    ],
    columnDefs: [
      { name: 'name' },
      { name: 'title' },
      { name: 'phone' },
      { name: 'location' }
    ],
    enableGridMenu: true,
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    enableColumnResizing: true,
    enableColumnReordering: true,
    enableFiltering: true,
    onRegisterApi: function(gridApi) {
      // Keep a reference to the gridApi.
      $scope.gridApi = gridApi;

      // Setup events so we're notified when grid state changes.
      $scope.gridApi.colMovable.on.columnPositionChanged($scope, saveState);
      $scope.gridApi.colResizable.on.columnSizeChanged($scope, saveState);
      $scope.gridApi.grouping.on.aggregationChanged($scope, saveState);
      $scope.gridApi.grouping.on.groupingChanged($scope, saveState);
      $scope.gridApi.core.on.columnVisibilityChanged($scope, saveState);
      $scope.gridApi.core.on.filterChanged($scope, saveState);
      $scope.gridApi.core.on.sortChanged($scope, saveState);

      // Restore previously saved state.
      restoreState();
    }
  };

  function saveState() {
    var state = $scope.gridApi.saveState.save();
    localStorageService.set('gridState', state);
  }

  function restoreState() {
    $timeout(function() {
      var state = localStorageService.get('gridState');
      if (state) $scope.gridApi.saveState.restore($scope, state);
    });
  }

});

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
    <script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.6/ui-grid.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.2/angular-local-storage.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.6/ui-grid.min.css"/>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div ng-app="grid-demo" ng-controller="MainCtrl">
          <div ui-grid="gridOptions"
               ui-grid-selection 
               ui-grid-resize-columns 
               ui-grid-auto-resize 
               ui-grid-move-columns 
               ui-grid-grouping 
               ui-grid-save-state>
          </div>
    </div>
  </body>

</html>

重现步骤：

1. 加载plinker
2. 更改列的宽度
3. 点击html预览上的小刷新按钮（plinker的右侧）
4. 请注意，您的列宽更改已保存
5. 单击进入任何过滤器字段并开始输入
6. 请注意，列宽已重置

实际上，ui-grid中的filterChange事件正在通知网格刷新，并且一旦刷新，它就会从原始列定义中重新加载。 但是，我不知所措，无法找到防止这种情况的方法。

任何建议将受到热烈欢迎！

Answer 1

您应该在将数据加载到网格中之后（例如在http，xhr请求之后）调用恢复状态