kątowy stan zapamiętywania i przywracania gridu

Question

Potrzebuję wiedzieć, jak zaimplementować stan zapisywania i przywracania w sieci angularui bez użycia żadnych przycisków. Muszę zapisać stan automatycznie, gdy tylko wprowadzimy jakiekolwiek zmiany w siatce. Musimy również automatycznie przywrócić zapisany stan. Nawet jeśli odświeżymy stronę, stan zapisany powinien zostać przywrócony:

Answer 1

Oto, co wymyśliłem. Nie mogłem znaleźć pojedynczego zdarzenia dla zmian stanu siatki, ale wygląda na to, że mają indywidualne zdarzenia dla prawie wszystkiego. Oto kilka, których używam. Właśnie ustawiłem punkt przerwania w wywołaniu zwrotnym onRegisterApi i przekopałem się przez obiekt gridApi, aby znaleźć zdarzenia. 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

nie mogłem znaleźć ani jednego zdarzenia dla zmiany stanu sieci =>

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

w przypadku chcesz, aby zresetować siatka

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

Answer 3

Oto serwis łatwy w użyciu 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; 
    }); 

Controller/Component

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

Html

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

Answer 4

to stosunkowo łatwo zapisać stan używając kątowe $ ciasteczka

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

Następnie, aby przywrócić:

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