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