2016-08-08 32 views
2

Ich arbeite mit ng-Tabelle und ich habe ein Problem mit der Gruppierung aufgetreten. Ich habe es so, dass die Gruppierung aktiviert oder deaktiviert werden kann, indem man Optionen in einem Dropdown-Menü auswählt, aber das Aktivieren der Gruppierung bricht immer die Paginierung ab, während es gut funktioniert, wenn die Gruppierung deaktiviert ist.Aktivieren Gruppierung in NG-Tabelle entfernt die Paginierung

Hier ist ein Beispiel dafür, was eines der Objekte in meinen Spalten Array wie folgt aussieht:

{ 
    field: "payeeName", 
    title: "Charity", 
    sortable: "payeeName", 
    filter: { 
    payeeName: 'select' 
    }, 
    classes: "td-width-150", 
    show: true, 
    hideOnExport: true, 
    groupable: "payeeName", 
    buildTemplate: function(donation, idx) { 
    var str = donation.payeeName + '<br/>'; 
    str += '<small class="text-muted">'; 
    str += $filter('buildAddressLine')(donation) + '<br/>'; 
    str += $filter('buildRegistrationId')(donation) + '<br/>'; 
    if (donation.designation) { 
     str += donation.designation; 
    } 
    str += '</small>'; 
    return str; 
    } 
} 

die Zeilen Hier sind die erscheinen, wenn die Gruppierung entweder eingeschaltet oder ausgeschaltet:

<tr class="ng-table-group" ng-show="grouping" ng-repeat-start="group in $groups"> 
<td> 
    <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-show="grouping" ng-hide="group.$hideRows" ng-repeat="user in group.data" ng-repeat-end> 
    <td ng-repeat="col in $columns track by $index" class="{{col.classes}}" {{col.hide}} ng-bind-html="col.buildTemplate(user, $index)"></td> 
</tr> 
<tr ng-show="!grouping" ng-repeat="user in $data"> 
    <td ng-repeat="col in cols track by $index" class="{{col.classes}}" {{col.hide}} ng-bind-html="col.buildTemplate(user, $index)"></td> 
</tr> 

Schließlich , hier ist die Funktion, die die Daten für die Tabelle vorbereitet. Es sollte bekannt sein, unter diesem Code ist ein API-Aufruf, den $ scope.donations gleich, was der Endpunkt kehrt setzt:

var prepData = function(checkFilter) { 
    var orderFilter = params.filter(); 
    // add grid filters to the data we loaded in get data 
    var filteredData = params.filter() ? $filter('filter')($scope.donations, params.filter()) : $scope.donations; 
    // apply the global filter 

    filteredData = $filter('filter')(filteredData, $scope.globalTableFilter); 


    var orderedData = params.sorting() ? 
    $filter('orderBy')(filteredData, params.orderBy()) : 
    filteredData; 

    orderedData = $filter('filter')(orderedData, $scope.filterDonation); 

    // Prep data for export 
    $scope.exportData = angular.copy(orderedData); 
    $scope.exportData.forEach(function(e) { 
    e.donationDate = $filter('date')(e.donationDate, 'dd/MM/yyyy'); 
    e.receiptAmount = $filter('currency')(e.receiptAmount); 
    }); 
    // recalc the pagination - MUST PRECEED THE PAGE SLICE 

    params.total(orderedData.length); 
    $scope.$emit('gotDonations', $scope.orderedData); 

    $scope.filterDonations = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()); 
    return $scope.filterDonations; 

}; 

Wenn Gruppierung über den Auswahleingang aktiviert ist, löst es eine Funktion, die wie folgt aussieht: $scope.tableDonationParams.group({payeeName: 'asc'})
wenn sie über die Select-Eingang deaktiviert ist Gruppierung, es feuert diese:
$scope.tableDonationParams.group({})

Wie ich schon sagte, Paginieren funktioniert gut, wenn auf ein leeres Objekt gesetzt Gruppierung, sondern bricht vollständig, wenn aktiviert. Hier

ist ein Bild von meinem Tisch nur für Klarheit: http://imgur.com/f6WyksA

I integriert ein Plugin Winkeldragdrop genannt mir zu erlauben, Elemente aus der Seitenleiste in die Tabelle zu ziehen hinzugefügt werden, um die Spalten Objekt und auch Drag Spalten übereinander, um ihre Positionierung auf dem Tisch zu ändern, damit sich das nicht verwirren lässt.

Vielen Dank für jede Hilfe.

+0

Für zukünftige Leser: sehen Sie dieses GitHub Problem: https://github.com/esvit/ng-table/issues/893 –

Antwort

5

Ich habe das gleiche Problem, wenn Paging auf Gruppendaten. Also füge ich diese Zeilen am Ende auf getGroups Funktion [ng-table.js].

if (!settings.dataOptions.applyPaging) { 
    return ngTableDefaultGetData(result, params); 
} 
return ngTableDefaultGetData.applyPaging(result, params); 

Die Seitennummerierung funktioniert entweder standardmäßig oder benutzerdefiniert.

+1

Es sollte sein 'if (settings.dataOptions &&! Settings.dataOptions.applyPaging) {.. .} ' –

+0

https://github.com/esvit/ng-table/issues/893 –