угловая ui сетка сохранить и восстановить состояние

Question

Мне нужно знать, как реализовать сохранение и восстановление состояния в сетке angularui без использования каких-либо кнопок. Мне нужно сохранить состояние автоматически, когда мы делаем какие-либо изменения в сетке. Мы также должны автоматически восстановить сохраненное состояние. Даже если мы обновим страницу, сохраненное состояние должно быть восстановлено.

Answer 1

Вот что я понял. Я не мог найти ни одного события для изменений состояния сетки, но похоже, что у них есть отдельные события почти для всего. Вот несколько, которые я использую. Я просто установил точку останова в обратном вызове 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); 
    }); 
} 

Answer 2

я не смог найти ни одного события для состояния сетки изменений =>

   window.onbeforeunload = function(e) { 
       $scope.saveState(); 
      }; 
      $scope.restoreState(); 

в случае, если вы хотите сбросить сетка

   if(localStorage.getItem("justReset")!="1") 
       $scope.restoreState(); 
      localStorage.setItem("justReset","0") 

Answer 3

Вот услуга проста в использовании с localforage

angular.module('starter.controllers') 
    .factory('SaveStateGridService', function SaveStateGridService($timeout, $state, $rootScope) { 
     var self = { 
      stateName: null, 
      keyLocalStorage: null, 
      listener: null, 
      init: function (gridApi) { 

       self.stateName = $state.$current.name; 
       self.keyLocalStorage = 'grid-' + self.stateName; 

       if (self.keyLocalStorage != null) { 

        // save the state before we leave 
        self.listerner = $rootScope.$on('$stateChangeStart', 
         function (event, toState, toParams, fromState, fromParams, options) { 
          if (fromState.name === self.stateName) { 
           var item = gridApi.saveState.save(); 
           localforage.setItem(self.keyLocalStorage, item); 
          } 
          self.listerner(); 
         } 
        ); 

        //restore the state when we load if it exists 
        localforage.getItem(self.keyLocalStorage, function (err, item) { 
         if (item != null) { 
          $timeout(function() { 
           gridApi.saveState.restore(null, item); 
          }, 1); 
         } 
        }); 

       } 

      } 
     }; 
     return self; 
    }); 

Контроллер/Компонентного

$scope.gridOptions.onRegisterApi = function (gridApi) { 
    SaveStateGridService.init(gridApi); 
}; 

Html

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

Answer 4

относительно легко сохранить состояние с помощью углового $ печенье

function saveState() { 
    var state = $scope.gridApi.saveState.save(); 
     $cookies.put('gridState', JSON.stringify(state)); 
} 

Тогда для восстановления:

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