AngularJS - ng-grid
Paginación, filtrado y css
Con AngularJS se hace muy fácil poder realizar un grid semejante a datatables sin apenas escribir código. El proyecto en github PruebasAngularJs para descargarlo.
En este ejemplo vamos a crear un sistema de páginas con un JSON ejemplo y poder realizar búsquedas en un input, de una forma rápida.
En un proyecto Yeomán con generador angular, hay que seguir los siguientes pasos:
- Instalar directiva ng-grid Visitar la web oficial ng-grid de angular-ui.
bower install ng-grid --save
- En app.js incluir directiva 'ngGrid'
- crear controlador y vista
yo angular:route grid
- En el controlador grid.js
'use strict';
/**
* @ngdoc function
* @name pruebasAngularApp.controller:GridCtrl
* @description
* # GridCtrl
* Controller of the pruebasAngularApp
*/
angular.module('pruebasAngularApp')
.controller('GridCtrl', function ($scope, $http) {
//el input foco nunca lo pierde
$('#filtro').focus();
$scope.noPerderFoco = function () {
$('#filtro').focus();
}
//en el guardo cuando hago click en una linea del grid
$scope.mySelections = [];
//pagination *********************************
$scope.filterOptions = {
filterText: $scope.miinput,
useExternalFilter: true
};
$scope.totalServerItems = 0;
$scope.pagingOptions = {
pageSizes: [10, 25, 50],
pageSize: 10,
currentPage: 1
};
$scope.setPagingData = function (data, page, pageSize) {
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.vocabulario = pagedData;
$scope.totalServerItems = data.length;
if (!$scope.$$phase) {
$scope.$apply();
}
};
$scope.getPagedDataAsync = function (pageSize, page, searchText) {
setTimeout(function () {
var data;
if (searchText) {
var ft = searchText.toLowerCase();
//es donde tengo el json, cambiar puerto y direccion json
$http.get('http://localhost:9000/json/voc.json').success(function (largeLoad) {
data = largeLoad.filter(function (item) {
return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
});
$scope.setPagingData(data, page, pageSize);
});
} else {
$http.get('http://localhost:9000/json/voc.json').success(function (largeLoad) {
$scope.setPagingData(largeLoad, page, pageSize);
});
}
}, 100);
};
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
$scope.$watch('pagingOptions', function (newVal, oldVal) {
if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
$scope.$watch('filterOptions', function (newVal, oldVal) {
if (newVal !== oldVal) {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
//fin paginacion ***********
//mira cada vez que escribo en el input
$scope.$watch('miinput', function () {
if ($scope.miinput !== "") {
$scope.pagingOptions.currentPage = 1;
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.miinput);
} else {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
}
}, true);
//mira cada vez que cambio el número de lineas a ver (así se autorefresca el grid)
$scope.$watch('pagingOptions.pageSize', function () {
$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText);
if ($scope.pagingOptions.pageSize === '10') {
$('.gridStyles').css({
"height": "430px"
});
} else if ($scope.pagingOptions.pageSize === '25') {
$('.gridStyles').css({
"height": "900px"
});
} else if ($scope.pagingOptions.pageSize === '50') {
$('.gridStyles').css({
"height": "1650px"
});
}
}, true);
//opciones del grid. El nombre que ponga deberá estar en la vista, ej: ng-grid="gridOpciones"
$scope.gridOpciones = {
data: 'vocabulario',
showGroupPanel: true,
enableCellSelection: true,
enableRowSelection: true,
// enableCellEdit: true,
selectedItems: $scope.mySelections,
multiSelect: false,
enablePaging: true,
showFooter: true,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
filterOptions: $scope.filterOptions,
columnDefs: [{
field: 'I',
displayName: 'Id',
width: 60,
resizable: true
},
{
field: 'T',
displayName: 'Type',
visible: false,
resizable: true
},
{
field: 'N',
displayName: 'Level',
width: 60
},
{
field: 'L',
displayName: 'List',
width: 100
},
{
field: 'P',
displayName: 'English',
minWidth: 400
},
{
field: 'R',
displayName: 'Spanish',
minWidth: 400
}
]
};
});
- En la vista grid.html
<h1>Ejemplo de un Grid con paginación y filtros</h1>
<p>
<input id="filtro" type="text" ng-model="miinput" placeholder="Filter text" ng-blur="noPerderFoco()"/>
</p>
<div class="gridStyles" ng-grid="gridOpciones"></div>
<!-- <div class="misItemsSeleccionados"></div> -->
<div ng-repeat="s in mySelections">
ID: <br>ENGLISH: <br>SPANISH:
</div>
- en el archivo css, en mi caso main.scss
/* grid */
.gridStyles{
margin:0 auto;
width:100%;
height:430px;
}
.ngRow.even {
background: White;
}
.ngRow.odd {
background: #E9F7FF;
}
.ngHeaderText, .ngGroupPanel, .ngFooterPanel{
background: #92D3FF;
}
.ngGroupPanel{
border-bottom: 1px solid #3981FF;
}
.ng-pristine, .ngPagerButton{
background: #FFFFFF;
}
.ngRow.selected {
background-color: #D3E7F4;
}
.ngRow.canSelect {
cursor: pointer;
}
.ngCellElement:focus {
outline: 0;
background-color: #C9DDF0;
}