angularjs - columndefs - Rejilla angular ui guardar y restablecer el estado

ui-grid columndefs

Question

Necesito saber cómo implementar guardar y restaurar el estado en una grilla angularui sin usar ningún botón. Necesito guardar el estado automáticamente cuando hagamos algún cambio en la grilla. Tenemos que restaurar automáticamente el estado guardado también. Incluso si actualizamos la página, debe restaurarse el estado guardado

Answer 1

es relativamente fácil guardar el estado usando Angular $ cookies

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

Entonces, para restaurar:

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

Answer 2

Esto es lo que descubrí. No pude encontrar un solo evento para los cambios de estado de la cuadrícula, pero parece que tienen eventos individuales para casi todo. Aquí hay algunos que estoy usando. Acabo de establecer un punto de interrupción en la devolución de llamada onRegisterApi y busqué en el objeto gridApi para encontrar los eventos. 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 3

No pude encontrar un solo evento para los cambios de estado de la red =>

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

en caso de que quieras resetear la grilla

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

Answer 4

Aquí hay un servicio fácil de usar 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;
    });

Controlador / Componente

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

Html

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