【发布时间】：2016-04-06 18:08:27
【问题描述】：
我遇到了一个问题，在 ui-grid 中进行过滤会导致列宽被重置。我已将网格状态保存到本地存储，并且该问题仅在第一次加载时发生，在任何列被手动调整大小之前。手动调整列大小后，过滤不再导致列宽重置。
链接器在这里：http://plnkr.co/edit/LAMZvOkpx6jsD4CWSz04?p=preview
（在这篇文章中也引用了：angular ui grid save and restore state）
'use strict';
angular.module('grid-demo', [
'LocalStorageModule',
'ui.grid',
'ui.grid.selection',
'ui.grid.resizeColumns',
'ui.grid.autoResize',
'ui.grid.moveColumns',
'ui.grid.grouping',
'ui.grid.saveState',
])
.config(function ($httpProvider, localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('grid-demo')
.setStorageType('localStorage')
.setNotify(true, true); // Not sure what this setting does
})
.controller('MainCtrl', function ($rootScope, $scope, $http, $window, $timeout, uiGridConstants, localStorageService) {
$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);
});
}
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script src="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.6/ui-grid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.2/angular-local-storage.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="http://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/release/3.0.6/ui-grid.min.css"/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div ng-app="grid-demo" ng-controller="MainCtrl">
<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>
</div>
</body>
</html>
重现步骤：
- 加载链接器
- 更改列宽
- 点击 html 预览上的小刷新按钮（plinker 右侧）
- 请注意，您的列宽更改已保存
- 点击任何过滤字段并开始输入
- 请注意，列宽已重置
看起来 ui-grid 中的 filterChange 事件确实在通知网格刷新，一旦这样做，它就会从原始列定义重新加载。但是，我无法找到防止这种情况发生的方法。
热烈欢迎任何建议！
【问题讨论】：
-
这方面有什么更新吗？有同样的问题。谢谢！
-
不幸的是，没有。我现在已经放弃了，ui-grid 团队似乎没有人响应。