JoLuGaMa Blog

Amante de la tecnología y las cosas bien hechas

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.
    1
    2
    
     bower install ng-grid --save
     
    
  • En app.js incluir directiva 'ngGrid'
  • crear controlador y vista
  • 1
    2
    
     yo angular:route grid
     
    
  • En el controlador grid.js
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    
       '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
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    <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
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    
    /* 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;
    }
    

Comentarios