griglia angolare UI salva e ripristina stato

Question

Ho bisogno di sapere come implementare salvare e ripristinare lo stato nella griglia angularui senza utilizzare alcun pulsante. Ho bisogno di salvare automaticamente lo stato ogni volta che apportiamo modifiche alla griglia. Dobbiamo anche ripristinare automaticamente lo stato salvato. Anche se aggiorniamo la pagina, lo stato salvato dovrebbe essere ripristinato

Answer 1

Ecco cosa ho capito. Non sono riuscito a trovare un singolo evento per le modifiche allo stato della griglia, ma sembra che abbiano eventi singoli per quasi tutto. Ecco alcuni che sto usando. Ho appena impostato un punto di interruzione nel callback onRegisterApi e ho scavato attraverso l'oggetto gridApi per trovare gli eventi. 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

non riuscivo a trovare un singolo evento per i cambiamenti di stato della griglia =>

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

nel caso in cui si desidera ripristinare la griglia

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

Answer 3

Ecco un servizio facile da usare con 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

è relativamente facile per salvare lo stato utilizzando angolari $ cookie

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

Poi, per ripristinare:

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