anglejs – 角ui网格保存和恢复状态

这是我想出来的.我找不到一个单一的事件,为网格状态的变化,但它看起来像他们有几乎所有的事件.这是我正在使用的几个.我只是在onRegisterApi回调中设置一个断点,并通过gridApi对象挖掘来查找事件. http://plnkr.co/edit/LAMZvOkpx6jsD4CWSz04?p=preview

HTML：

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

JS：

$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);
  });
}