jQuery のテーブルを凍結するメソッド headers

jQuery のテーブルを凍結するメソッド headers_jquery

WBOY

リリース： 2016-05-16 16:10:57

オリジナル

1289 人が閲覧しました

この記事の例では、jQuery が凍結されたテーブルヘッダーを実装する方法について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

少し前にプロジェクトに取り組んでいたとき、リストを表示する必要があったのですが、データが多すぎてスクロール時にテーブルのヘッダーが固定されなければならなかったので、次のスクリプトを書きました（インターネット上にある対応するスクリプトを参照してください。ただし、それほどではありません）理想的だったので自分で書きましたが、現時点では、プロジェクトはテーブルヘッダーの凍結のみを使用しており、列の凍結を指定する必要がないため、不完全としか考えられません現時点ではスクリプトを使用していますが、通常はテーブルヘッダーが凍結されている場合にのみ使用できます)。スクリーンショットを見てください:

これにより、テーブルのヘッダーが固定され、その下のテーブル本体のコンテンツが自由にスクロールできるようになります

コードを見てください:

コードをコピーコードは次のとおりです:

//jquery の CloneTableHeader メソッドを拡張します

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

// 凍結されたヘッダーが配置されている DIV を取得します。DIV が既に存在する場合は削除します

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

If (obj) {

jQuery(obj).remove();

}

var browserName = navigator.appName;//後続のコードでブラウザを区別するために使用されるブラウザ情報を取得します 

var ver = navigator.appVersion;

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

var content = document.getElementById(tableParentDivId);

varscrollWidth = content.offsetWidth - content.clientWidth;

var tableOrg = jQuery("#" tableId);//テーブルの内容を取得

var table = tableOrg.clone();//テーブルの内容を複製します

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

//注: 凍結するヘッダーを thead に入れる必要があります 

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();

});//各列の幅を動的に取得します

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

If (colsWidths.size() > 0) {//ブラウザに従って固定ヘッダーの幅に値を割り当てます (主に IE8 を区別するため)

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

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

If (ブラウザバージョン == 8.0)

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

それ以外の場合 <<>
tableCloneCols.eq(i).width(colsWidths[i]);

} else {

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

}

}

}

// 凍結されたヘッダーの DIV コンテナを作成し、プロパティを設定します 

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());

}