anglejs – 角ui网格保存和恢复状态

前端之家收集整理的这篇文章主要介绍了anglejs – 角ui网格保存和恢复状态前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要知道如何在角度网格中实现保存和恢复状态,而不使用任何按钮.当我们在网格中进行任何更改时,我需要自动保存状态.我们必须自动还原保存的状态.即使我们刷新页面,应该恢复保存的状态
这是我想出来的.我找不到一个单一的事件,为网格状态的变化,但它看起来像他们有几乎所有的事件.这是我正在使用的几个.我只是在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);
  });
}

猜你在找的Angularjs相关文章