Ngtable: serve l'intestazione della tabella esplicita e seleziona il filtro

Question

Ho un requisito per mostrare un dato di tabella di 5 colonne con l'intestazione di 3 colonne simile allo screenshot di sotto (Si prega di igonre la prima colonna nel corpo della tabella con la stella gialla).

aiutarmi con paio di problemi riportati di seguito.

1. Quando fornisco valori di intestazione espliciti all'interno di thead per eseguire un colspan di 3 per last 3 runs, non ottengo i filtri.
2. È corretto/il modo migliore per fare un filtro di selezione utilizzando filterStatusFor0($column), filterStatusFor1($column) & filterStatusFor2($column) nel mio codice?

ngtable

<div class="col-md-8"> 
    <table ng-table="taskDetailTableParams" show-filter="true" class="table upgradeTaskDetailTable text-left table-bordered"> 
     <thead> 
      <th>Task Name</th> 
      <th>Type of Task</th> 
      <th colspan="3">Last 3 runs</th> 
     </thead> 
     <tbody>    
      <tr ng-repeat="item in $data" height="10px" class="animate" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"> 
       <td data-title="'Task Name'" class="text-left col-sm-4 col-md-4 col-lg-4" header-class="text-left" filter="{ 'name': 'text' }" sortable="'name'">{{ item.name }}</td> 
       <td data-title="'Type of Task'" class="text-left col-sm-2 col-md-2 col-lg-2" header-class="text-left" filter="{ 'type': 'text' }" sortable="'type'">{{item.type}}</td> 
       <td data-title="'latest Run'" class="text-left col-sm-2 col-md-2 col-lg-2" header-class="text-left" filter="{ 'selectIdFor0': 'select' }" sortable="'selectIdFor0'" filter-data="filterStatusFor0($column)"><img ng-src="{{ item.statusImageFor0 }}" title="{{ item.statusFor0 }}" data-toggle="tooltip" data-placement="bottom" /></td> 
       <td data-title="'2nd Latest Run'" class="text-left col-sm-2 col-md-2 col-lg-2" header-class="text-left" filter="{ 'selectIdFor1': 'select' }" sortable="'selectIdFor1'" filter-data="filterStatusFor1($column)"><img ng-src="{{ item.statusImageFor1 }}" title="{{ item.statusFor1 }}" data-toggle="tooltip" data-placement="bottom" /></td> 
       <td data-title="'3rd Latest Run'" class="text-left col-sm-2 col-md-2 col-lg-2" header-class="text-left" filter="{ 'selectIdFor2': 'select' }" sortable="'selectIdFor2'" filter-data="filterStatusFor2($column)"><img ng-src="{{ item.statusImageFor2 }}" title="{{ item.statusFor2 }}" data-toggle="tooltip" data-placement="bottom" /></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Selezionare filtro codice

$scope.filterStatusFor0 = function(column) { 
    var def = $q.defer(), 
     arr = [], 
     filterStatus = []; 
    angular.forEach($scope.taskDetailData, function(item) { 
     if (jQuery.inArray(item.selectIdFor0, arr) === -1) { 
      arr.push(item.selectIdFor0); 
      filterStatus.push({ 
       'id': item.selectIdFor0, 
       'title': item.statusFor0 
      }); 
     } 
    }); 
    filterStatus.sort(function(a, b) { 
     if (a.id < b.id) 
      return -1; 
     if (a.id > b.id) 
      return 1; 
     return 0; 
    }); 
    def.resolve(filterStatus); 
    return def; 
}; 

Si prega di verificare this plunker link

Answer 1

si potrebbe aggiungere un header personalizzato con template-header="my_header.html" come direcitve attributo e quindi il modo più semplice per ottenere il vostro colgroup vorrebbe aggiungere una riga sopra il normale modello di intestazione.

Quindi è più facile avere tutti i filtri in posizione e per le altre celle vuote in quella riga si può fare lo styling css per rimuovere i bordi per avere una tabella più bella. (Non aggiunto nel plunkr aggiornato).

Per la seconda parte della domanda con il metodo di filtro. Stai ripetendo lo stesso codice tre volte (che non segue il principio DRY).

Si potrebbe migliorare aggiungendo un id alla propria funzione in modo da avere un solo metodo di filtro che viene chiamato con id diversi.

Di seguito è riportato il codice aggiornato con il modello di intestazione personalizzato aggiunto. È inoltre possibile trovare il codice in questo plunkr.

var app = angular.module('main', ['ngTable']) 
 
    .controller('DemoCtrl', function($scope, $q, $filter, ngTableParams, $log) { 
 

 
    $scope.taskDetailData = [{ 
 
     "index": 0, 
 
     "id": "000ABC0G000000000WQQ", 
 
     "name": "Jaantestsameepidentity", 
 
     "type": "Hadoop", 
 
     "statusFor0": "Failed", 
 
     "selectIdFor0": "Failed", 
 
     "statusImageFor0": "http://i.imgur.com/knyz0Ye.png", 
 
     "statusFor1": "Failed", 
 
     "selectIdFor1": "Failed", 
 
     "statusImageFor1": "http://i.imgur.com/knyz0Ye.png", 
 
     "statusFor2": "Failed", 
 
     "selectIdFor2": "Failed", 
 
     "statusImageFor2": "http://i.imgur.com/knyz0Ye.png" 
 
    }, { 
 
     "index": 1, 
 
     "id": "000ABC0I000000000WQC", 
 
     "name": "Salesorder_netsuite", 
 
     "type": "Salesforce", 
 
     "statusFor2": "No runs available", 
 
     "statusFor1": "No runs available", 
 
     "selectIdFor2": "stopped", 
 
     "selectIdFor1": "stopped", 
 
     "statusImageFor2": "http://i.imgur.com/L5c69tb.png", 
 
     "statusImageFor1": "http://i.imgur.com/L5c69tb.png", 
 
     "statusFor0": "Success", 
 
     "selectIdFor0": "Success", 
 
     "statusImageFor0": "http://i.imgur.com/ZkAwklS.png" 
 
    }, { 
 
     "index": 2, 
 
     "id": "000ABC0I000000000WQW", 
 
     "name": "today_record", 
 
     "type": "Oracle", 
 
     "statusFor2": "No runs available", 
 
     "statusFor1": "No runs available", 
 
     "selectIdFor2": "stopped", 
 
     "selectIdFor1": "stopped", 
 
     "statusImageFor2": "http://i.imgur.com/L5c69tb.png", 
 
     "statusImageFor1": "http://i.imgur.com/L5c69tb.png", 
 
     "statusFor0": "Success", 
 
     "selectIdFor0": "Success", 
 
     "statusImageFor0": "http://i.imgur.com/ZkAwklS.png" 
 
    }]; 
 
    $scope.taskDetailTableParams = new ngTableParams({ 
 
     page: 1, // show first page 
 
     count: 10, // count per page 
 
     sorting: { 
 
     index: 'asc' // initial sorting 
 
     } 
 
    }, { 
 
     total: $scope.taskDetailData.length, // length of data 
 
     getData: function($defer, params) { 
 
     var filterData = params.filter() ? $filter('filter')($scope.taskDetailData, params.filter()) : $scope.taskDetailData; 
 
     var orderedData = params.sorting() ? $filter('orderBy')(filterData, params.orderBy()) : filterData; 
 
     var table_data = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()); 
 
     params.total(orderedData.length); 
 
     $defer.resolve(table_data); 
 
     } 
 
    }); 
 

 
    /** 
 
    * Filter for ngtable (Below 3 functions) 
 
    * @return {[type]}  [description] 
 
    */ 
 
    $scope.filterStatus = function(column, id) { // for0 --> moved to id 
 
     //console.log(column); 
 
     var def = $q.defer(), 
 
     arr = [], 
 
     filterStatus = []; 
 
     angular.forEach($scope.taskDetailData, function(item) { 
 
     //console.log(item.selectIdFor0, item['selectIdFor' + id]) 
 
     if (jQuery.inArray(item['selectIdFor' + id], arr) === -1) { 
 
      arr.push(item['selectIdFor' + id]); 
 
      filterStatus.push({ 
 
      'id': item['selectIdFor' + id], 
 
      'title': item['statusFor' + id] 
 
      }); 
 
     } 
 
     }); 
 
     filterStatus.sort(function(a, b) { 
 
     if (a.id < b.id) 
 
      return -1; 
 
     if (a.id > b.id) 
 
      return 1; 
 
     return 0; 
 
     }); 
 
     def.resolve(filterStatus); 
 
     return def; 
 
    }; 
 
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
 

 
<div ng-app="main" ng-controller="DemoCtrl"> 
 
    
 
    <script type="text/ng-template" id="aw_ngtable_header.html"> 
 
     <tr> 
 
     <!-- add new row above normal header for last 3 runs colgroup --> 
 
     <th ng-repeat="n in [].constructor($columns.length-2) track by $index" colspan="{{lastThree = ($index == $columns.length -3)? 3:''}}"> 
 
      <span ng-if="lastThree">Last 3 runs</span> 
 
     </th> 
 
     </tr> 
 
     <tr> 
 
      <th ng-repeat="column in $columns" 
 
      ng-class="{ 
 
         'sortable': parse(column.sortable), 
 
         'sort-asc': params.sorting()[parse(column.sortable)]=='asc', 
 
         'sort-desc': params.sorting()[parse(column.sortable)]=='desc' 
 
         }" 
 
      ng-click="sortBy(column, $event)" 
 
      ng-show="column.show(this)" 
 
      ng-init="template = column.headerTemplateURL(this)" 
 
      class="header {{column.class}}"> 
 
      <div ng-if="!template" ng-show="!template" ng-bind="parse(column.title)"></div> 
 
      <div ng-if="template" ng-show="template"><div ng-include="template"></div></div> 
 
     </th> 
 
    </tr> 
 
    <tr ng-show="show_filter" class="ng-table-filters"> 
 
     <th ng-repeat="column in $columns" ng-show="column.show(this)" class="filter"> 
 
      <div ng-repeat="(name, filter) in column.filter"> 
 
       <div ng-if="column.filterTemplateURL" ng-show="column.filterTemplateURL"> 
 
        <div ng-include="column.filterTemplateURL"></div> 
 
       </div> 
 
       <div ng-if="!column.filterTemplateURL" ng-show="!column.filterTemplateURL"> 
 
        <div ng-include="'ng-table/filters/' + filter + '.html'"></div> 
 
       </div> 
 
      </div> 
 
     </th> 
 
    </tr> 
 
    </script> 
 
    
 
    
 
    <table ng-table="taskDetailTableParams" template-header="aw_ngtable_header.html" show-filter="true" class="table upgradeTaskDetailTable text-left table-bordered"> 
 
    <!--<thead> 
 
      <th>Task Name</th> 
 
      <th>Type of Task</th> 
 
      <th colspan="3">Last 3 runs</th> 
 
     </thead>--> 
 
    <tr ng-repeat="item in $data" height="10px" class="animate" ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}"> 
 
     <td data-title="'Task Name'" class="text-left col-sm-4 col-md-4 col-lg-4" header-class="text-left" filter="{ 'name': 'text' }" sortable="'name'">{{ item.name }}</td> 
 
     <td data-title="'Type of Task'" class="text-left col-sm-2 col-md-2 col-lg-2" header-class="text-left" filter="{ 'type': 'text' }" sortable="'type'">{{item.type}}</td> 
 
     <td data-title="'latest Run'" class="text-left col-sm-2 col-md-2 col-lg-2" header-class="text-left" filter="{ 'selectIdFor0': 'select' }" sortable="'selectIdFor0'" filter-data="filterStatus($column, 0)"> 
 
     <img ng-src="{{ item.statusImageFor0 }}" title="{{ item.statusFor0 }}" data-toggle="tooltip" data-placement="bottom" /> 
 
     </td> 
 
     <td data-title="'2nd Latest Run'" class="text-left col-sm-2 col-md-2 col-lg-2" header-class="text-left" filter="{ 'selectIdFor1': 'select' }" sortable="'selectIdFor1'" filter-data="filterStatus($column, 1)"> 
 
     <img ng-src="{{ item.statusImageFor1 }}" title="{{ item.statusFor1 }}" data-toggle="tooltip" data-placement="bottom" /> 
 
     </td> 
 
     <td data-title="'3rd Latest Run'" class="text-left col-sm-2 col-md-2 col-lg-2" header-class="text-left" filter="{ 'selectIdFor2': 'select' }" sortable="'selectIdFor2'" filter-data="filterStatus($column, 2)"> 
 
     <img ng-src="{{ item.statusImageFor2 }}" title="{{ item.statusFor2 }}" data-toggle="tooltip" data-placement="bottom" /> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>