AngularJS - ng-grid

Publicado: por

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:

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;
}