Ngtable: Benötigen explizite Tabellenüberschrift und wählen Sie Filter

Question

Ich habe eine Anforderung, um eine 5 Spalte Tabellendaten mit 3 Spaltenüberschrift ähnlich dem folgenden Screenshot zu zeigen (bitte die 1. Spalte im Tabellenkörper mit gelben Stern igonre).

Helfen Sie mir mit einigen Problemen weiter unten.

1. Wenn ich explizite Header-Werte innerhalb desad zur Verfügung stellen, um einen Colspan von 3 für last 3 runs zu machen, bekomme ich keine Filter.
2. Ist es richtig/beste Weise, einen Auswahlfilter unter Verwendung filterStatusFor0($column), filterStatusFor1($column) & filterStatusFor2($column) in meinem Code zu tun?

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> 

Select Filtercode

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

Bitte überprüfen this plunker link

Answer 1

Sie können einen benutzerdefinierten Header mit template-header="my_header.html" als direcitve Attribut hinzufügen und dann die einfachste Weg zu bekommen colgroup würde eine Zeile über der normalen Header-Vorlage hinzufügen.

So ist es einfacher, alle Filter an Ort und Stelle zu haben, und für die anderen leeren Zellen in dieser Zeile können Sie CSS-Stile verwenden, um die Ränder zu entfernen, um eine besser aussehende Tabelle zu haben. (Nicht in der aktualisierten Plunkr hinzugefügt).

Für den zweiten Teil Ihrer Frage mit der Filtermethode. Sie wiederholen den gleichen Code dreimal (das folgt nicht DRY Prinzip).

Sie könnten dies verbessern, indem Sie Ihrer Funktion eine id hinzufügen, so dass Sie nur eine Filtermethode haben, die nur mit anderen IDs aufgerufen wird.

Unten ist der aktualisierte Code mit der hinzugefügten benutzerdefinierten Headervorlage. Sie können den Code auch in diesem plunkr finden.

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>