JQuery DataTables – Zeilengruppierung, Summe, reduzierbar, Export

Lesezeit: 5 Minuten

Benutzer-Avatar
madvora

Ich verwende seit langem JQuery DataTables. Dies ist das erste Mal, dass ich mit der Zeilengruppierung arbeite. Ich habe ein gutes Beispiel dafür gefunden, wo ich anfangen möchte. – Gruppierung

  1. Wie würde ich ein Extra hinzufügen <td> zur gruppierten Zeile? Was wäre, wenn ich die Summe der gruppierten Gehälter in dieser gruppierten Zeile anzeigen möchte? Im Moment sieht es so aus, als ob Sie nur den Namen der Gruppe anzeigen können.

Geben Sie hier die Bildbeschreibung ein

  1. Kann ich diese Zeilen so zusammenklappbar machen, wie sie sind? Hier und Hier? Es sieht so aus, als wäre dies ein anderes Plugin als der ursprüngliche Gruppierungscode. Dieses Aussehen wäre meine Präferenz, aber das Arbeiten mit untergeordneten Zeilen scheint nicht dasselbe zu sein wie das Gruppieren.

Zusätzliche Information

Ich werde Daten aus einer Ajax-Quelle zurückgeben.

AKTUALISIERUNG 1

Also habe ich eine Tabelle mit Zeilengruppierung erstellt und gefunden dieses Beispiel wie man eine Spalte zusammenfasst. Ich stecke diesen Wert in a <td> in dieser Gruppenreihe. Jetzt muss ich nur noch diesen Summenbetrag in die Gruppen aufteilen, anstatt die Summe der gesamten Spalte. Ich brauche dabei Hilfe.

"drawCallback": function (settings) {
    var api = this.api(), data;
    var rows = api.rows({ page: 'current' }).nodes();
    var last = null;

    //Calculates the total of the column
    var total = api
        .column(5)  //the salary column
        .data()
        .reduce(function (a, b) {
            return a + b;
        }, 0);

    //Groups the Office column
    api.column(2, { page: 'current' }).data().each(function (group, i) {
        if (last !== group) {
            $(rows).eq(i).before(
                '<tr class="group"><td>' + group 
                 + '</td><td></td><td></td><td></td><td>' 
                 + total + '</td></tr>'
            );

            last = group;
        }
    });                  
}

AKTUALISIERUNG 2

Es sieht für mich nicht so aus, als ob DataTables alle Funktionen bereitstellen kann, die ich benötige. Die Zeilengruppierung hat keine integrierten Zwischensummen oder Reduzierbarkeit. Selbst wenn ich dafür etwas Benutzerdefiniertes erstellen kann, sieht es so aus, als würden diese Gruppenzeilen während des Exports nicht erfasst, was eine weitere Anforderung ist, die ich benötige. Ich werde wohl einen anderen Weg gehen müssen. Es sei denn, jemand kann all diese Bedürfnisse erfüllen, stören Sie sich nicht.

AKTUALISIERUNG 3

Ich habe mich stattdessen für Kendo Grids entschieden. Alle diese Funktionen sind bereits integriert.

  • Ich hoffe, das sind keine echten Daten.

    – robmj

    6. Dezember 2015 um 23:07 Uhr

  • Kommt direkt von den Beispieldaten im ersten Link.

    – madvora

    7. Dezember 2015 um 2:54 Uhr

  • Ist das Back-End davon zufällig in c#? Muss es ein API-Aufruf sein?

    – Richard

    10. Dezember 2015 um 18:25 Uhr

  • Ja, es ist eine MVC-Site. Es muss ein API-Aufruf sein, um die Daten zu füllen.

    – madvora

    10. Dezember 2015 um 18:51 Uhr

  • Haben Sie versucht, ein Handbuch zu erstellen <td> das nutzt Array.prototype Methoden, um Dinge zu gruppieren?

    – Bwaxxlo

    11. Dezember 2015 um 14:39 Uhr

"drawCallback": function ( settings ) {
	var api = this.api(),data;
	var rows = api.rows( {page:'current'} ).nodes();
	var last=null;
	
	// Remove the formatting to get integer data for summation
	var intVal = function ( i ) {
		return typeof i === 'string' ?
			i.replace(/[\$,]/g, '')*1 :
			typeof i === 'number' ?
				i : 0;
	};

	total=new Array();
	api.column(2, {page:'current'} ).data().each( function ( group, i ) {
	    group_assoc=group.replace(' ',"_");
        if(typeof total[group_assoc] != 'undefined'){
            total[group_assoc]=total[group_assoc]+intVal(api.column(5).data()[i]);
        }else{
            total[group_assoc]=intVal(api.column(5).data()[i]);
        }
		if ( last !== group ) {
			$(rows).eq( i ).before(
				'<tr class="group"><td colspan="4">'+group+'</td><td class="'+group_assoc+'"></td></tr>'
			);
			
			last = group;
		}
	} );
    for(var key in total) {
        $("."+key).html("$"+total[key]);
    }
}

Ich habe Ihren Code überprüft und Ihren angegebenen Link mit Beispiel überprüft.

Ich habe auch Ihre überprüft UPDATE

Das fand ich **Kendo Grids** ist die beste Option gemäß Ihrer Anforderung.

Also empfehle ich zu verwenden: AKTUALISIERUNG 3

Überprüfen Sie in Ihrem Code die Zeile .. ” if (last !== group) Ich habe 2 Schaltflächen hinzugefügt:

  • expandiert -> ruft die Funktion ‘abrir’ auf
  • close->ruft die Funktion ‘cerrar’ auf

beide erhalten das Gruppenelement Beispiel: ‘MAZDA’, ‘TOYOTA’, ‘BMW’

if (last !== group)
{
groupid++;
alert(group);
$(rows).eq(i).before(
'<tr class="group father_' + group + ' text-right"><td class="text-left"><text class="order">'
+ group +
'</text>'+
' <i class="fa fa-plus-square-o" aria-hidden="true" btn btn-default btn-xs" onclick="abrir(\''+group+'\')">'+
' <i class="fa fa-minus-square-o aria-hidden="true"  btn btn-default btn-xs" onclick="cerrar(\''+group+'\')">'+
'</td></tr>');
last = group;
}

Hier sind die Funktionen ‘abrir’ und ‘cerrar’, die ich außerhalb des Datatables-Skripts platziert habe

<script>
    function abrir(group) {
        $(".collapse_"+group).collapse("show");
    }

    function cerrar(group) {
        $(".collapse_"+group).collapse("hide");
    }
</script>

Dann verwende ich nach Drawcallback (das ist der Hinweis):

"fnRowCallback": function (nRow, aData, iDisplayIndex)
 {
   nRow.className = "collapse collapse_" + aData.LINEA;
   return nRow;
 },

Was mache ich hier? … Fügen Sie für jede einfache Zeile die Bootstrap-Klasse “collapse” und meine eigene Klasse collapse_+aData.LINEA hinzu, wobei linea das Feld ist, nach dem ich gruppiere, also schließlich -> class=”collapse collapse_MAZDA” class=” zusammenbruch zusammenbruch_BMW”

Diese Elemente können standardmäßig ausgeblendet sein, wenn Sie die Schaltflächen in den Gruppenzeilen betätigen, wird nach Elementen gesucht, die die Klasse “collapse_MAZDA” AN haben

1205930cookie-checkJQuery DataTables – Zeilengruppierung, Summe, reduzierbar, Export

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy