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).Ngtable: serve l'intestazione della tabella esplicita e seleziona il filtro
aiutarmi con paio di problemi riportati di seguito.
- Quando fornisco valori di intestazione espliciti all'interno di thead per eseguire un colspan di 3 per
last 3 runs
, non ottengo i filtri. - È 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
http://stackoverflow.com/questions/24761587/how-to-combine-the-customer-header-and-filter-in-ngtable –