Copying sources and texts (also in parts) for publishing without our permission is NOT ALLOWED. We are fed up with finding our work on other sites (like stackoverflow).
Das Kopieren von Quellcode und Texten (auch in Auszügen) ist nicht erlaubt. Wir haben es gründlich satt, unsere Arbeit auf anderen Webseiten zu finden.

Copying for non-public usage is allowed.           Das private Kopieren und Benutzen ist natürlich erlaubt und erwünscht.
01. Jul
Teaser

bootstrapTable: Hauptelement im Event erhalten

Die sehr hilfreiche JS Komponente “bootstrap-table” arbeitet mit Events, welche bei diversen Aktionen des Benutzers ausgelöst werden. Für den Entwickler kann es dabei jedoch sehr schwer sein, in einem Event die Eltern-Komponente (“Parent-Element”) der Tabelle zu erhalten. Funktionen wie “$(this)” usw. liefern jeweils nur die Referenz auf die bootstrapTable ohne Referenz auf das Hauptelement.

Beispiel:

<table id="myTable" class="table table-striped"></table>

Diese Tabelle wird nun (nach Einbinden diverser benötigter Dateien zum bootstrapTable umgewandelt:

$("#myTable").bootstrapTable({ ... });

Um jetzt bei einem Event auf das “myTable” Element zugreifen zu können, muss man (leider) den Quellcode der Komponente anpassen. Wir nehmen als Beispiel das Event “onPageChange”.

Bearbeiten Sie die Datei “bootstrap-table.js”:

Suchen Sie dort nach folgender Zeile (ca. 3200)

onPageChange: function onPageChange(number, size) {

und ergänzen Sie die Zeile wie folgt:

onPageChange: function onPageChange(number, size, element) {

Die zweite Änderung erfolgt unterhalb (ca. Zeile 5200 bis 5300):
Hier ergänzen Sie die folgende Zeile

this.trigger('page-change', this.options.pageNumber, this.options.pageSize);

wie folgt:

this.trigger('page-change', this.options.pageNumber, this.options.pageSize, this.$el);

Fertig. Bitte speichern Sie die geänderte Datei ab.

Wenn Sie jetzt den Event abfangen, dann erhalten Sie einen dritten Parameter:

onPageChange: function(number, size, element) {
  console.log(element.attr("id"));
})

Das liefert dann die ID des Hauptelementes zurück:

myTable

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

fünf × fünf =