Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

angularjs - angular ui grid save and restore state

I need to know how to implement save and restore state in angularui grid without using any buttons. I need to save the state automatically when ever we do any changes in the grid. We have to auto restore the saved state also. Even if we refresh the page the saved state should be restored

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Here's what I figured out. I couldn't find a single event for grid state changes, but It does look like they have individual events for almost everything. Here are a few that i'm using. I just set a break point in the onRegisterApi callback and dug through the gridApi object to find the events. 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);
  });
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...