कोणीय यूई ग्रिड राज्य को बचाने और पुनर्स्थापित करने के लिए

Question

मुझे यह जानने की जरूरत है कि किसी भी बटन का उपयोग किए बिना एंजुलुई ग्रिड में राज्य को सहेजने और पुनर्स्थापित करने के तरीके को कैसे कार्यान्वित किया जाए। जब भी हम ग्रिड में कोई भी परिवर्तन करते हैं तो मुझे राज्य को स्वचालित रूप से सहेजने की आवश्यकता होती है। हमें सहेजे गए राज्य को भी ऑटो को पुनर्स्थापित करना होगा। यहां तक ​​कि यदि हम पृष्ठ को रीफ्रेश करते हैं तो सहेजे गए राज्य को

Answer 1

यहां बताया गया है। मुझे ग्रिड राज्य में बदलाव के लिए एक भी घटना नहीं मिली, लेकिन ऐसा लगता है कि उनके पास लगभग हर चीज के लिए व्यक्तिगत घटनाएं हैं। यहां कुछ ऐसे हैं जो मैं उपयोग कर रहा हूं। मैंने बस रजिस्ट्रार एपीआई कॉलबैक में एक ब्रेक पॉइंट सेट किया है और ईवेंट खोजने के लिए ग्रिडएपी ऑब्जेक्ट के माध्यम से खोला है। 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> 

जे एस:

$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

मैं ग्रिड राज्य में परिवर्तन के लिए एक भी घटना नहीं पा सके =>

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

मामले में आप रीसेट करना चाहते हैं ग्रिड

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

Answer 3

यहाँ एक सेवा के लिए आसान

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

एचटीएमएल

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

Answer 4

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

नियंत्रक/घटक के साथ उपयोग करने के लिए यह कोणीय $ कुकीज़

का उपयोग कर राज्य को बचाने के लिए अपेक्षाकृत आसान है

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