lưới ui góc tiết kiệm và khôi phục trạng thái

Question

Tôi cần biết cách thực hiện lưu và khôi phục trạng thái trong lưới angularui mà không cần sử dụng bất kỳ nút nào. Tôi cần lưu trạng thái tự động khi chúng tôi thực hiện bất kỳ thay đổi nào trong lưới. Chúng tôi cũng phải tự động khôi phục trạng thái đã lưu. Ngay cả khi chúng tôi làm mới trang, trạng thái đã lưu sẽ được khôi phục

Answer 1

Dưới đây là những gì tôi đã tìm ra. Tôi không thể tìm thấy một sự kiện duy nhất để thay đổi trạng thái lưới, nhưng có vẻ như họ có các sự kiện riêng lẻ cho hầu hết mọi thứ. Dưới đây là một số ít tôi đang sử dụng. Tôi chỉ cần thiết lập một điểm break trong callback onRegisterApi và đào qua đối tượng gridApi để tìm các sự kiện. 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

tôi không thể tìm thấy một sự kiện duy nhất cho sự thay đổi trạng thái grid =>

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

trong trường hợp bạn muốn thiết lập lại lưới

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

Answer 3

Dưới đây là một dịch vụ dễ sử dụng với 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; 
    }); 

điều khiển/Component

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

Html

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

Answer 4

nó tương đối dễ dàng để tiết kiệm nước bằng cách sử dụng góc $ cookie

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

Sau đó, để khôi phục:

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