Angular Состояние сохранения и восстановления сетки ui

Ответ 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);
  });
}

Ответ 2

Здесь сервис прост в использовании с 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>

Ответ 3

относительно легко сохранить состояние, используя Angular $cookies

    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);
}

Ответ 4

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

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

если вы хотите reset сетку

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