在组模式下,当我按某个字段对网格进行排序时,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"> {{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 }} — {{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">●</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
});
}