Winkel ui Raster speichern und wiederherstellen Zustand

Question

Ich muss wissen, wie Sie speichern und wiederherstellen Zustand in angularui Gitter ohne Verwendung von Schaltflächen. Ich muss den Zustand automatisch speichern, wenn wir Änderungen im Raster vornehmen. Wir müssen den gespeicherten Zustand auch automatisch wiederherstellen. Selbst wenn wir die Seite aktualisieren, sollte der gespeicherte Zustand wiederhergestellt werden.

Answer 1

Hier ist, was ich herausgefunden habe. Ich konnte kein einziges Ereignis für Netzstatusänderungen finden, aber es sieht so aus, als ob sie für fast alles individuelle Ereignisse haben. Hier sind ein paar, die ich benutze. Ich habe gerade einen Breakpoint im OnRegisterApi Callback gesetzt und durch das GridApi Objekt geforscht, um die Events zu finden. 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

Ich konnte nicht ein einzelnes Ereignis für die Netzzustandsänderungen finden =>

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

falls Sie zurücksetzen möchten das Gitter

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

Answer 3

Hier ist ein Service leicht

mit localforage verwenden

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

ist es relativ einfach, den Zustand mit Angular $ Cookies speichern

Dann

, wiederherzustellen:

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