无法使用ngTable创建可排序的多层主题

时间:2018-12-03 21:19:14

标签: javascript html angularjs frontend ngtable

我正在使用ngTable在angularjs中创建一个表。我想为桌子定制桌子,桌子有2个等级。

Head

实际上,我可以创建它,但是排序不起作用。 但这仍然不是问题,它没有用,因为我必须在thead中输入ng-include =“ templates.header”表达式。

好吧,我做到了,上方的thead在正确的位置,但是...下方的thead在桌子的底部-实际具有功能排序。 html:

<section>
<h1 class="page-title">Records</h1>
<div class="list-group faded">
    <div class="portlet light bordered">
        <div class="portlet-body">
            <table class="table table-striped table-bordered table-hover order-column" ng-table="tableParams">
                <tbody>
                <tr ng-repeat="record in $data">
                    <td title="'Id'" sortable="'_id'">{{record._id}}</td>
                    <td title="'Total'" sortable="'count'">{{record.count || 0}}</td>
                    <td title="'Error'" sortable="'errorBefore'">
                        {{record.errorBefore || 0}}
                    </td>
                    <td title="'Timeout'" sortable="'timeoutBefore'">
                        {{record.timeoutBefore || 0}}
                    </td>
                    <td title="'Error'" sortable="'errorAfter'">
                        {{record.errorAfter || 0}}
                    </td>
                    <td title="'Timeout'" sortable="'timeoutAfter'">
                        {{record.timeoutAfter || 0}}
                    </td>
                    <td title="'Finished'" sortable="'done'">{{record.done || 0}}</td>
                    <td title="'Actions'" class="dt-center fit">
                        <button>
                               ...
                        </button>
                    </td>
                </tbody>
                <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th colspan="2">Before event</th>
                    <th colspan="2">After event</th>
                    <th colspan="2"></th>
                </tr>
                </thead>
                <thead ng-include="templates.header">
                <tr>
                    <th ng-repeat="$column in $columns"
                        ng-class="{
                            'sortable': $column.sortable(this),
                            'sort-asc': params.sorting()[$column.sortable(this)]=='asc',
                            'sort-desc': params.sorting()[$column.sortable(this)]=='desc'
                        }"
                        ng-click="$ctrl.sortBy($column, $event)"
                        ng-if="$column.show(this)"
                        ng-init="template = $column.headerTemplateURL(this)"
                        class="header sortable">

                        <div ng-if="!template" class="ng-table-header ng-scope"
                             ng-class="{'sort-indicator': params.settings().sortingIndicator == 'div'}">
                            <span ng-bind="$column.title(this)"
                                  ng-class="{'sort-indicator': params.settings().sortingIndicator == 'span'}"
                                  class="ng-binding sort-indicator">
                            </span>
                        </div>
                    </th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

有人可以帮助我,如何为该表创建多级表头?

这是一个小问题,但由于某种原因,其中没有数据。 https://plnkr.co/edit/TeY4dOgW18HpGwZ7aOWj

0 个答案:

没有答案