2

在组模式下,当我按某个字段对网格进行排序时,ngTable 会对组进行排序。因此,每次我按某个字段排序时,都会“跳跃”。我找不到在没有“跳跃”组的情况下仅对组中的行进行排序的解决方案。

这个问题在 ngTable 的 github 上的开发者问题中仍然没有答案。也许有人知道这个问题的解决方案

我的 html 表格:

  <table ng-show="!loading" ng-table="invoiceGrid" class="table invoices" if-empty="invoiceGrid">
    <thead>
        <tr>
            <th ng-repeat="column in columns" ng-show="column.visible"
                class="text-center {{column.sortable}} {{column.headerClass}}" ng-class="{
                    'sort-asc': invoiceGrid.isSortBy(column.field, 'asc'),
                    'sort-desc': invoiceGrid.isSortBy(column.field, 'desc')
                    }"
                ng-click="invoiceGridColumnSort(column)">
                <div ng-if="column.sortable">&nbsp;{{column.title}}</div>
            </th>
        </tr>
    </thead>

    <tbody ng-repeat="group in $groups" ng-show="tableView === tableViews.GroupByMonth">
        <tr class="ng-table-group" ng-click="group.$hideRows = !group.$hideRows">
            <td colspan="{{columns.length}}">
                <a href="">
                    <span class="fa" ng-class="{ 'fa-chevron-right': group.$hideRows, 'fa-chevron-down': !group.$hideRows }"></span>
                    <strong>{{ group.value }} &mdash; {{totalAmountOfMonthYearGroup(group) | currency}}</strong>
                </a>
            </td>
        </tr>
        <tr ng-hide="group.$hideRows || hideInvoiceByTypeFilter(invoice)" ng-repeat="invoice in group.data" ng-click="invoiceGridRowClick(invoice, $data)" class="data-row {{invoice.invoiceClass}}" ng-class="{'active': invoice.$selected}">
            <td style="color: orange;" >
                <span ng-show="invoice.IsNew">&#x25cf;</span>
            </td>
            <td class="invoice-type-column" data-title="'Тип'">
                <invoice-type-icons invoice-types="invoice.InvoiceTypes"></invoice-type-icons>
            </td>
            <td class="invoice-num-column" data-title="'Invoic eNumber'" sortable="'InvoiceNumber'">{{invoice.InvoiceNumber}}</td>
            <td class="invoice-date-column" data-title="'Invoice Date'" sortable="'InvoiceDate'">{{invoice.InvoiceDate | date: 'dd.MM.yyyy' }}</td>
            <td class="invoice-renter-column" data-title="'Renter'" sortable="'Renter'">{{invoice.Renter}}</td>
            <td class="invoice-purpose-column" data-title="'Purpose Description'">{{invoice.PurposeDescription}}</td>
            <td class="invoice-sum-column" data-title="'Pay'" sortable="'InvoiceType'">
                <div>{{invoice.PaySum | currency:""}}</div>
                <div ng-show="invoice.partOfSummPaidStatus">{{invoice.PaidSum | currency:""}}</div>
            </td>
        </tr>
    </tbody>

在控制器中初始化表:

function initTable() {
        var groupingBy = null;
        if (userProvider.userHaveOneOfTheRoles([enumFactory.userRoles.Director, enumFactory.userRoles.Receptioner])) {
            if ($scope.tableView === $scope.tableViews.GroupByMonth) {
                groupingBy = 'InvoiceMonth';
            }
        }
        if (userProvider.userInRole(enumFactory.userRoles.Renter)) {
            if ($scope.tableView === $scope.tableViews.GroupByStatus) {
                groupingBy = 'StatusGroup';
            }
        }

        $scope.columns = [
            { title: '', field: 'IsNew', visible: true, headerClass: "fixed-header", sortable: 'sortable' },
            { title: 'Тип', field: 'InvoiceTypes', visible: true, headerClass: "fixed-header", sortable: 'sortable' },
            { title: 'Счет', field: 'InvoiceNumber', visible: true, headerClass: "fixed-header", sortable: 'sortable' },
            { title: 'Дата выставления', field: 'InvoiceDate', visible: true, headerClass: "fixed-header", sortable: 'sortable' },
            { title: 'Арендатор', field: 'Renter', visible: !userProvider.userInRole(enumFactory.userRoles.Renter), headerClass: "", sortable: 'sortable' },
            { title: 'Назначение', field: 'PurposeDescription', visible: true, headerClass: "", sortable: 'sortable' },
            { title: 'Оплата, руб.', field: 'PaySum', visible: true, headerClass: "fixed-header", sortable: 'sortable' }
        ];

        $scope.invoiceGrid = new ngTableParams(
            {
                page: 1,
                count: $scope.invoices.length,
                sorting: { none: true },
            },
            {
                counts: [],
                groupBy: groupingBy,
                total: 1,
                getData: function ($defer, params) {
                    var filteredData;
                    filteredData = $filter('filter')($scope.invoices, function (data) {
                        if ($rootScope.renterFilterValue) {
                            return $scope.findSubstring(data.Renter, $rootScope.renterFilterValue);
                        } else {
                            return true;
                        }
                    });

                    filteredData = $filter('filter')(filteredData, function (data) {
                        if ($scope.filter.$) {
                            return ($scope.findSubstring(data.InvoiceNumber, $scope.filter.$)
                                || $scope.findSubstring($filter('date')(data.InvoiceDate, 'dd.MM.yyyy'), $scope.filter.$)
                                || (userProvider.userHaveOneOfTheRoles([enumFactory.userRoles.Director, enumFactory.userRoles.Receptioner]) && ($scope.findSubstring(data.Renter, $scope.filter.$)))
                                || $scope.findSubstring(data.PurposeDescription, $scope.filter.$)
                                || $scope.findSubstring(data.PaySum, $scope.filter.$));
                        } else {
                            return true;
                        }
                    });

                    var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : $scope.invoices;
                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                },
                $scope: $scope
            });
    }
4

2 回答 2

1

当在 ngTableParams 中将 groupingBy 参数设置为整​​数值时,ng-table 不会对带有行的组进行排序(在我的代码中它是一个字符串)

请注意,因为 ng-table 会在整数值大于 999 时再次对组进行排序。

于 2014-08-06T14:07:56.800 回答
1

可能有点晚了,但是 orderBy:'value' 在遍历组时可以解决问题。

<tbody ng-repeat="group in $groups | orderBy:'value'">
    <tr class="ng-table-group">
        <td colspan="{{$columns.length}}">
            <a href="" ng-click="group.$hideRows = !group.$hideRows">
                <span class="glyphicon" ng-class="{ 'glyphicon-chevron-right': group.$hideRows, 'glyphicon-chevron-down': !group.$hideRows }"></span>
                <strong>{{ group.value }}</strong>
            </a>
        </td>
    </tr>
    <tr ng-hide="group.$hideRows" ng-repeat="user in group.data">
        <td sortable="name" data-title="'Name'">
            {{user.name}}
        </td>
        <td sortable="age" data-title="'Age'">
            {{user.age}}
        </td>
    </tr>
</tbody>

请参阅此处的示例:http: //plnkr.co/edit/iLUJ3QvO2Z5wuaZtTrCo ?p=preview

于 2015-04-15T21:52:31.397 回答