Я пытался восстановить сохраненную таблицу сетки пользовательского интерфейса из кэша, но если я использую пользовательское меню сетки пользовательского интерфейса, как в приведенном ниже примере, ничего не отображается.
Шаги
Шаг 1: выберите любой один возраст из выпадающего списка множественного выбора 'age' столбца.
Результат - отфильтрованные данные будут иметь возраст как 1, 10, 100 вместо точного 1.
Шаг 2: refre sh сетка с последующим шагом 1.
Результат - отфильтровано данные основаны на точном 1, и таблица сетки также содержит некоторые данные.
здесь начинается больше проблем.
Шаг 3: выберите несколько возрасты из нескольких выбранных возрастов раскрываются.
Результат - данные будут фильтроваться по возрасту, как в шаге 1.
Шаг 4: refre sh page
Результат - Должна отображаться таблица с отфильтрованными данными на основе ранее выбранных возрастов, но должна быть пустая таблица).
EXACT фильтрация также не работает :( Multi select не работает
index. html файл
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular-aria.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/lodash.min.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/jszip.min.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/excel-builder.dist.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.8.3/ui-grid.pinning.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.8.3/ui-grid.saveState.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.7.1/angular-local-storage.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-save-state ui-grid-pinning ui-grid-selection></div>
</div>
<script src="app.js"></script>
</body>
</html>
app . js
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.selection','ui.grid.pinning','ui.grid.saveState',
'LocalStorageModule']);
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', '$timeout', 'localStorageService',
function ($scope, $http, uiGridConstants, $timeout, localStorageService) {
$scope.gridOptions = {
enableFiltering: true,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
// to save state of table in cache on column position change (left/right)
gridApi.pinning.on.columnPinned($scope, $scope.saveState);
// to save state of table on bases of filter
gridApi.core.on.filterChanged($scope, $scope.saveState);
// to restore state of table before rendering table data
$scope.restoreState();
},
columnDefs: [
{ field: 'name' },
{ field: 'age',
filter: {
type: uiGridConstants.filter.SELECT,
condition: uiGridConstants.filter.EXACT,
},
filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="loopVariable in col.filters"><div my-custom-modal></div></div>'
}
]
};
// function to save state of table
// gridCacheObject - name of object stored in browser cache
$scope.saveState = function() {
var state = $scope.gridApi.saveState.save();
localStorageService.set('gridCacheObject', state);
},
// function to restore state of table
$scope.restoreState = function() {
console.log("java")
$timeout(function() {
var state = localStorageService.get('gridCacheObject');
if (state) {
$scope.gridApi.saveState.restore($scope, state);
}
});
};
// dummy data
var data = '[{"id":0,"age":30,"name":"Sandoval Mclean"},{"id":1,"name":"Nieves Mack","age":22},{"id":2,"age":20,"name":"Terry Clay"},{"id":3,"age":21,"name":"Bishop Carr"},{"id":4,"age":33,"name":"Hatfield Hudson"},{"id":5,"age":29,"name":"Madge Wilkerson"},{"id":6,"age":30,"name":"Harrell Gaines"},{"id":7,"age":23,"name":"Christensen Wall"}]';
$scope.gridOptions.data = JSON.parse(data);
}])
.controller('myCustomModalCtrl', function($scope, $compile, $timeout,localStorageService ) {
var $elm;
$scope.showDropDownModal = function() {
$scope.listOfAges = [];
$scope.col.grid.appScope.gridOptions.data.forEach( function ( row ) {
if ( $scope.listOfAges.indexOf( row.age ) === -1 ) {
$scope.listOfAges.push( row.age );
}
});
$scope.listOfAges.sort();
$scope.gridOptions = {
data: [],
enableColumnMenus: false,
onRegisterApi: function( gridApi) {
$scope.gridApi = gridApi;
if ( $scope.loopVariable && $scope.loopVariable.listTerm ){
$timeout(function() {
$scope.loopVariable.listTerm.forEach( function( age ) {
var entities = $scope.gridOptions.data.filter( function( row ) {
return row.age === age;
});
if( entities.length > 0 ) {
$scope.gridApi.selection.selectRow(entities[0]);
}
});
});
}
}
};
$scope.listOfAges.forEach(function( age ) {
$scope.gridOptions.data.push({age: age});
});
var html = '<div class="modal" ng-style="{display: \'block\'}"><div class="modal-dialog"><div class="modal-content"><div class="modal-header">Filter</div><div class="modal-body"><div id="grid1" ui-grid="gridOptions" ui-grid-selection class="modalGrid"></div></div><div class="modal-footer"><button id="buttonClose" class="btn btn-primary" ng-click="close()">Filter</button></div></div></div></div>';
$elm = angular.element(html);
angular.element(document.body).prepend($elm);
$compile($elm)($scope);
};
$scope.close = function() {
console.log("neww scopee", $scope.gridApi);
var ages = $scope.gridApi.selection.getSelectedRows();
$scope.loopVariable.listTerm = [];
ages.forEach( function( age ) {
$scope.loopVariable.listTerm.push( age.age );
});
$scope.loopVariable.term = $scope.loopVariable.listTerm.join(', ');
$scope.loopVariable.condition = new RegExp($scope.loopVariable.listTerm.join('|'));
if ($elm) {
$elm.remove();
$elm.null;
}
};
})
.directive('myCustomModal', function() {
return {
template: '<label>{{colFilter.term}}</label><button ng-click="showDropDownModal()">...</button>',
controller: 'myCustomModalCtrl'
};
});
ссылки
http://ui-grid.info/docs/#! / Учебное пособие / учебное пособие:% 20306% 20заказное% 20Фильтры
и
http://embed.plnkr.co/UzoEgHg4G2rNlutklx4K/
https://github.com/angular-ui/ui-grid/issues/4421#issuecomment -305082895
Пожалуйста, посетите plnkr для демо
http://plnkr.co/edit/zR7pmQASkvHV2JjZ
refre sh сетка также показывает
**Controller 'uiGrid', required by directive 'uiGridCell', can't be found!**
ошибка