grille angulaire d'ui enregistrer et restaurer l'état

J'ai besoin de savoir comment mettre en œuvre sauvegarder et restaurer l'état dans angularui grille sans l'aide des boutons. J'ai besoin d'enregistrer l'état automatiquement chaque fois que nous faisons des changements dans la grille. Nous avons automatique de la restauration de l'état sauvegardé aussi. Même si nous rafraîchir la page de l'état sauvegardé doit être restauré

source d'informationauteur Mahesh Mahalingappa

  1. 22

    Voici ce que j'ai compris. Je ne pouvais pas trouver un événement unique pour la grille de modifications de l'état, mais Il ne ressemble qu'ils ont chacun des événements pour presque tout. Voici quelques-uns que j'utilise. Je viens de mettre un point de rupture dans le onRegisterApi de rappel et creusé à travers la gridApi objet pour connaître les événements. 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);
});
}
  2. 0

    Ici est un service facile à utiliser avec 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;
});

    Contrôleur /Composant

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

    Html

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

    il est relativement facile d'enregistrer l'état à l'aide Angulaire $cookies

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

    Puis, à la restauration:

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

    Je ne pouvais pas trouver un événement unique pour la grille de changements d'état =>

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

    dans le cas où vous souhaitez réinitialiser la grille

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