angularjs - Ngtable:需要明确的表头并选择过滤器

Question

我需要显示一个 5 列表数据，其中包含 3 列标题，类似于下面的屏幕截图(请忽略带有黄色星号的表正文中的第一列)。



帮我解决下面给出的几个问题。

当我在 thead 中提供显式 header 值以将 last 3 runs 的 colspan 设为 3 时，我没有得到过滤器。

使用 filterStatusFor0($column) 进行选择过滤器是否正确/最佳方式？ , filterStatusFor1($column) & filterStatusFor2($column)在我的代码中？

表格

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

选择过滤器代码

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

请查收 this plunker link

Answer 1

您可以使用 template-header="my_header.html" 添加自定义标题作为直接属性，然后获取 colgroup 的最简单方法是在普通标题模板上方添加一行。

因此，将所有过滤器放置到位更容易，对于该行中的其他空单元格，您可以执行 css 样式来移除边框以获得更好看的表格。 (未添加到更新的 plunkr 中)。

对于使用过滤方法的问题的第二部分。您重复了三遍相同的代码(这不遵循 DRY 原则)。

您可以通过添加 id 来改进这一点。到您的函数，因此您将只有一个使用不同 ID 调用的过滤器方法。

以下是添加了自定义标题模板的更新代码。您也可以在此 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>