jQuerys Methode zum Einfrieren von Tabellenheadern

jQuerys Methode zum Einfrieren von Tabellenheadern_jquery

WBOY

Freigeben： 2016-05-16 16:10:57

Original

1304 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie jQuery eingefrorene Tabellenköpfe implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Als ich vor einiger Zeit an einem Projekt arbeitete, musste ich eine Liste anzeigen, aber da zu viele Daten vorhanden waren, musste der Tabellenkopf beim Scrollen eingefroren werden, also habe ich das folgende Skript geschrieben (ich habe auch das gefunden (entsprechendes Skript im Internet, aber nicht sehr viel) Ideal, also habe ich es selbst geschrieben, aber da das Projekt derzeit nur das Einfrieren von Tabellenüberschriften verwendet und das Einfrieren von Spalten nicht angeben muss, kann es derzeit nur als unvollständig angesehen werden Skript derzeit, aber im Allgemeinen kann es nur verwendet werden, wenn der Tabellenkopf eingefroren ist), Schauen Sie sich nun den Screenshot an:

Dadurch wird der Tabellenkopf eingefroren und der Inhalt des Tabellenkörpers unten kann frei gescrollt werden

Sehen Sie sich den Code an:

Code kopieren Der Code lautet wie folgt:

//Erweitern einer CloneTableHeader-Methode für jquery

jQuery.fn.CloneTableHeader = function(tableId, tableParentDivId) {

//Den DIV abrufen, in dem sich der eingefrorene Header befindet. Wenn der DIV bereits vorhanden ist, entfernen Sie ihn

var obj = document.getElementById("tableHeaderDiv" tableId);

Wenn (obj) {

jQuery(obj).remove();

} 

var browserName = navigator.appName;//Browserinformationen abrufen, die zur Unterscheidung von Browsern in nachfolgenden Codes verwendet werden 

var ver = navigator.appVersion;

var browserVersion = parseFloat(ver.substring(ver.indexOf("MSIE") 5, ver.lastIndexOf("Windows")));

var content = document.getElementById(tableParentDivId);

var scrollWidth = content.offsetWidth - content.clientWidth;

var tableOrg = jQuery("#" tableId);//Tabelleninhalt abrufen

var table = tableOrg.clone();//Tabelleninhalt klonen

table.attr("id", "cloneTable");

//Hinweis: Sie müssen den einzufrierenden Header in den Kopf 
 einfügen
var tableHeader = jQuery(tableOrg).find("thead");

var tableHeaderHeight = tableHeader.height();

tableHeader.hide();

var colsWidths = jQuery(tableOrg).find("tbody tr:first td").map(function() {

          jQuery(this).width();
 zurückgeben
});//Ermitteln Sie dynamisch die Breite jeder Spalte

var tableCloneCols = jQuery(table).find("thead tr:first td")

If (colsWidths.size() > 0) {// Weisen Sie der eingefrorenen Header-Breite entsprechend dem Browser einen Wert zu (hauptsächlich zur Unterscheidung von IE8)

for (i = 0; i < tableCloneCols.size(); i ) {

If (i == tableCloneCols.size() - 1) {

Wenn (browserVersion == 8.0)

                       tableCloneCols.eq(i).width(colsWidths[i] scrollWidth);

Sonst <<>
                      tableCloneCols.eq(i).width(colsWidths[i]);

              } sonst {

                 tableCloneCols.eq(i).width(colsWidths[i]);

            }

}

}

//Erstelle einen DIV-Container für den eingefrorenen Header und lege die Eigenschaften fest 

var headerDiv = document.createElement("div");

headerDiv.appendChild(table[0]);

jQuery(headerDiv).css("height", tableHeaderHeight);

jQuery(headerDiv).css("overflow", "hidden");

jQuery(headerDiv).css("z-index", "20");

jQuery(headerDiv).css("width", "100%");

jQuery(headerDiv).attr("id", "tableHeaderDiv" tableId);

jQuery(headerDiv).insertBefore(tableOrg.parent());

}

Das Obige ist der vollständige Code. Sehen wir uns nun an, wie man ihn verwendet:

Fügen Sie einfach das folgende Skript zur Seite hinzu

Code kopieren Der Code lautet wie folgt:

Das ist alles. Es ist in Ordnung, die Tabelle und die ID des DIV zu übergeben, in dem sich die Tabelle befindet. Es muss beachtet werden, dass der einzufrierende Header im Kopf platziert werden muss, sonst kann das Einfrieren nicht erreicht werden.

Der obige Code besteht den Test in IE6, 7 und 8, aber FF und Chrome haben das Problem einer ungenauen Header-Breite.

Klicken Sie hier für den vollständigen BeispielcodeDownload von dieser Website.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.