Méthode jQuery pour geler la table headers

Méthode jQuery pour geler la table headers_jquery

WBOY

Libérer： 2016-05-16 16:10:57

original

1304 Les gens l'ont consulté

L'exemple de cet article décrit comment jQuery implémente les en-têtes de table gelés. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Quand je travaillais sur un projet il y a quelque temps, j'avais besoin d'afficher une liste, mais comme il y avait trop de données, il fallait figer l'en-tête du tableau lors du défilement, j'ai donc écrit le script suivant (j'ai aussi trouvé le script correspondant sur Internet, mais pas beaucoup) Idéal, donc je l'ai écrit moi-même, mais actuellement, comme le projet utilise uniquement le gel des en-têtes de tableau, et n'a pas besoin de spécifier le gel des colonnes, il ne peut être considéré que comme un projet incomplet script à l'heure actuelle, mais en général il ne peut être utilisé que si l'en-tête du tableau est figé), Jetez maintenant un œil à la capture d'écran :

Cela permet de geler l'en-tête du tableau et le contenu du corps du tableau ci-dessous peut défiler librement

Regardez le code :

Copier le code Le code est le suivant :

//Extension d'une méthode CloneTableHeader pour jquery

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

//Récupérez le DIV où se trouve l'en-tête gelé, si le DIV existe déjà, supprimez-le

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

Si (obj) {

jQuery(obj).remove();

} 

var browserName = navigator.appName;//Obtenir les informations du navigateur, qui sont utilisées pour distinguer les navigateurs dans les codes suivants 

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);//Obtenir le contenu de la table

var table = tableOrg.clone();//Cloner le contenu de la table

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

//Remarque : Vous devez mettre l'en-tête à figer dans l'en-tête 

var tableHeader = jQuery(tableOrg).find("thead");

var tableHeaderHeight = tableHeader.height();

tableHeader.hide();

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

          return jQuery(this).width();

});//Obtenir dynamiquement la largeur de chaque colonne

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

If (colsWidths.size() > 0) {//Attribuer une valeur à la largeur d'en-tête figée en fonction du navigateur (principalement pour distinguer IE8)

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

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

Si (browserVersion == 8.0)

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

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

               } autre {

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

            }

>

>

//Créez un conteneur DIV pour l'en-tête gelé et définissez les propriétés 

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

headerDiv.appendChild(table[0]);

jQuery(headerDiv).css("hauteur", 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());

>

Ce qui précède est le code complet, voyons maintenant comment l'utiliser :

Ajoutez simplement le script suivant à la page

Copier le code Le code est le suivant :

C'est tout, vous pouvez passer dans la table et l'ID du DIV où se trouve la table. Il faut noter que l'en-tête à geler doit être placé dans l'en-tête, sinon le gel ne peut pas être réalisé.

Le code ci-dessus réussit le test dans IE6, 7 et 8, mais FF et Chrome auront le problème d'une largeur d'en-tête inexacte.

Cliquez ici pour l'exemple de code completTéléchargez depuis ce site.

J'espère que cet article sera utile à la programmation jQuery de chacun.