Rumah >hujung hadapan web >tutorial js >Kaedah jQuery untuk membekukan table headers_jquery

Kaedah jQuery untuk membekukan table headers_jquery

WBOYasal: 2016-05-16 16:10:571295semak imbas

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan pengepala jadual beku. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ketika saya sedang mengerjakan projek suatu ketika dahulu, saya perlu memaparkan senarai, tetapi kerana terdapat terlalu banyak data, pengepala jadual terpaksa dibekukan semasa menatal, jadi saya menulis skrip berikut (saya juga menemui skrip yang sepadan di Internet, tetapi tidak terlalu banyak) Ideal, jadi saya menulisnya sendiri, tetapi pada masa ini, kerana projek itu hanya menggunakan pembekuan pengepala jadual, dan tidak perlu menentukan pembekuan lajur, ia hanya boleh dianggap sebagai tidak lengkap skrip pada masa ini, tetapi secara amnya ia boleh digunakan hanya jika pengepala jadual dibekukan), Sekarang lihat pada tangkapan skrin:

Ini mencapai pembekuan pengepala jadual dan kandungan badan jadual di bawah boleh ditatal secara bebas

Lihat kod:

Salin kod Kod adalah seperti berikut:

//Melanjutkan kaedah CloneTableHeader untuk jquery

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

//Dapatkan DIV di mana pengepala beku terletak, jika DIV sudah wujud, alih keluarnya

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

Jika (obj) {

jQuery(obj).remove();

} 

var browserName = navigator.appName;//Dapatkan maklumat penyemak imbas, yang digunakan untuk membezakan penyemak imbas dalam kod berikutnya 

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);//Dapatkan kandungan jadual

var table = tableOrg.clone();//Klon kandungan jadual

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

//Nota: Anda perlu meletakkan pengepala untuk dibekukan ke dalam iklan 

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

var tableHeaderHeight = tableHeader.height();

tableHeader.hide();

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

          kembalikan jQuery(this).width();

});//Dapatkan lebar setiap lajur
 secara dinamik
var tableCloneCols = jQuery(table).find("thead tr:first td")

Jika (colsWidths.size() > 0) {//Tetapkan nilai pada lebar pengepala beku mengikut penyemak imbas (terutamanya untuk membezakan IE8)

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

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

If (browserVersion == 8.0)

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

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

              } lain {

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

            }

}

}

//Buat bekas DIV untuk pengepala beku dan tetapkan sifat 

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

headerDiv.appendChild(jadual[0]);

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

jQuery(headerDiv).css("limpahan", "tersembunyi");

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

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

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

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

}

Di atas ialah kod lengkap, sekarang mari kita lihat cara menggunakannya:

Hanya tambahkan skrip berikut pada halaman

Salin kod Kod adalah seperti berikut: