Potrzebuję wiedzieć, jak zaimplementować stan zapisywania i przywracania w sieci angularui bez użycia żadnych przycisków. Muszę zapisać stan automatycznie, gdy tylko wprowadzimy jakiekolwiek zmiany w siatce. Musimy również automatycznie przywrócić zapisany stan. Nawet jeśli odświeżymy stronę, stan zapisany powinien zostać przywrócony:kątowy stan zapamiętywania i przywracania gridu
Odpowiedz
Oto, co wymyśliłem. Nie mogłem znaleźć pojedynczego zdarzenia dla zmian stanu siatki, ale wygląda na to, że mają indywidualne zdarzenia dla prawie wszystkiego. Oto kilka, których używam. Właśnie ustawiłem punkt przerwania w wywołaniu zwrotnym onRegisterApi i przekopałem się przez obiekt gridApi, aby znaleźć zdarzenia. 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);
});
}
Zawijanie funkcji restoreState z $ timeout jest kluczowe, ponieważ nie zastosowałoby przywróconego stanu bez jego dodawania. – Schreinbo
nie mogłem znaleźć ani jednego zdarzenia dla zmiany stanu sieci =>
window.onbeforeunload = function(e) {
$scope.saveState();
};
$scope.restoreState();
w przypadku chcesz, aby zresetować siatka
if(localStorage.getItem("justReset")!="1")
$scope.restoreState();
localStorage.setItem("justReset","0")
Oto serwis łatwy w użyciu 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;
});
Controller/Component
$scope.gridOptions.onRegisterApi = function (gridApi) {
SaveStateGridService.init(gridApi);
};
Html
<div
ui-grid="gridOptions"
ui-grid-save-state></div>
to stosunkowo łatwo zapisać stan używając kątowe $ ciasteczka
function saveState() {
var state = $scope.gridApi.saveState.save();
$cookies.put('gridState', JSON.stringify(state));
}
Następnie, aby przywrócić:
$scope.restoreState = function() {
$timeout(function() {
var state = JSON.parse($cookies.get('gridState'));
if (state) {
$scope.gridApi.saveState.restore($scope, state);
}
Pliki cookie nie działają: angular.js: 14791 Plik cookie 'gridState' prawdopodobnie nie został ustawiony lub przepełniony, ponieważ był zbyt duży (9040> 4096 bajtów)! – Slava
- 1. Prawidłowy sposób tworzenia i przywracania kontrolerów UIView podczas przywracania stanu?
- 2. Stan sklepu/rozszerzone węzły jtree do przywracania stanu
- 3. Sposób automatycznego przywracania fragmentów działa
- 4. Algorytm nieprzywiązywania funkcji przywracania
- 5. Wynik słabej zapamiętywania funkcji wieloparametrowej w OCaml
- 6. OES_vertex_array_object i klient stan
- 7. Stan tee i wyjścia
- 8. przywracania stanu sterty w całej sterty
- 9. Django - Czy metody zapamiętywania modelu są leniwe?
- 10. Jakie są różne techniki zapamiętywania w Javie?
- 11. przywracania stanu widoku przed zastosowaniem XML atrybuty
- 12. Kątowy materiał sidenav i ustalony pasek narzędzi
- 13. certyfikat SSL kątowy i samopodpisany - ERR_INSECURE_RESPONSE
- 14. Szablon kątowy i .NET Częściowa informacja zwrotna
- 15. przywracania po błędzie w transakcji
- 16. Błąd podczas przywracania MYSQL db
- 17. Kątowy HTTP Włącz pętlę
- 18. Kątowy status HTTP (-1)
- 19. Test kątowy e2e Testowanie
- 20. Przełęcz element kątowy dyrektywy
- 21. Jak uporządkować kątowy html?
- 22. Przełącznik kątowy z boolowskim
- 23. Kątowy odpowiednik jQuery $ .mapa?
- 24. Łącząc „I” i „OR” Stan w NSPredicate
- 25. Arel i klauzula i pusty stan
- 26. Opcja kopii zapasowej i przywracania jest niedostępna w pgAdmin III
- 27. Historia przywracania i bieżąca strona po wznowieniu widoku WWW
- 28. Zautomatyzowane testowanie zachowania i przywracania stanu iOS 6
- 29. tworzenie kopii zapasowych i przywracania WSZYSTKIE ustawienia resharpera
- 30. Rozwiązanie do przywracania i tworzenia kopii zapasowych PostgreSQL
Nie jestem pewien, dlaczego byliście w dół przydatne. Próbuję też to rozgryźć. Czy miałeś szczęście? –