在不排序组的情况下对ng-table中的行进行排序

Question

在组模式下，当我按某些字段对网格进行排序时，ngTable会对组进行排序。所以每次我按某个字段排序时，组就会"跳跃"。我找不到解决方案，只能在没有"跳"组的组中排序行。

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

My table in 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
            });
    }

Answer 1

ng-table在ngTableParams中设置groupingBy参数为整数值时不排序组(在我的代码中它是一个字符串)

注。要小心，因为当整数值大于999时，ng-table将重新对组进行排序。

Answer 2

可能有点晚了，但是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