jqueryベースのテーブル内の同じセルを結合するプラグイン(lite版)_jquery

// ここに書かれた一つの jquery モジュールの形式
$('#process').mergeCell({
// 目前だけあるcolsこれ一つの構成项, 用数組表示列のインデックス, 初めから
// その後、指定列に従って来处処理(合并)同じ内容单元格
cols: [0, 3]
});

;(function($) {
// jquery のソース コードを見ると、$.fn が $.prototype であることがわかります。jQuery は以前のバージョンのプラグとの互換性のためにのみ保持されています。 -in
// プロトタイプの形式
$.fn.mergeCell = function(options) {
return this.each(function() {
var cols = options.cols;
for ( var i = cols.length - 1;cols[i] != unknown; i--) {
// fixbug コンソールのデバッグ
// console.debug(cols[i]); mergeCell($(this),cols [i]);
}
}); 明確に理解している場合JavaScript のクロージャとスコープの概念をまとめたプラグインです。内部で使用されるプライベート メソッドです。
// 詳細については、前回のエッセイで紹介した本を参照してください。
function mergeCell($table,colIndex) {
$table.data('col-content', ''); // セルの内容を格納します
$table.data('col-rowspan', 1) // 計算された行範囲の値を格納します。 1
$table.data('col-td' , $()); // 前の行とは異なる最初の td を保存し (jQuery によってカプセル化されます)、デフォルトは「空の」jquery オブジェクトです
$table.data('trNum', $( 'tbody tr', $table).length); //最後の行に特殊処理を行う場合の判定に使用する、処理対象のテーブルの総行数
//重要なのは、データの各行を「スキャン」することです。col-td とそれに対応する行範囲を見つけることです。
$('tbody tr', $table).each(function(index) {
// td:eq のcolIndex は列インデックスです
var $td = $('td:eq('colIndex ')', this);
// セルの現在の内容を取得します
var currentContent = $td.html();
// まず次回はこの分岐を実行します
if ($table.data('col-content') == '') {
$ table.data('col-content', currentContent);
$table.data('col-td', $td);
} else {
// 前の行は同じ内容です現在の行
if ($table.data('col-content') == currentContent) {
// 前の行の内容が現在の行と同じ場合、col-rowspan が累積され、新しい値が保存されます
var rowspan = $table.data('col-rowspan') 1;
$table.data('col-rowspan', rowspan); $td.remove() を使用すると、他の列の処理に影響することを意味します
$td.hide();
// 最後の行の状況は少し特殊です
//たとえば、最後の 2 行の td の内容が同じである場合、この時点でcol-td に保存されている td を最後の行の rowspan に設定する必要があります。
if (index = = $table.data(' trNum'))
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
} else { // の内容前の行は現在の行と異なります
// 列行幅のデフォルトは 1 です。計算された列行幅が変更されていない場合、処理されません
if ($table.data('col-rowspan' ) != 1) {
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
}
// 保存最初の異なるコンテンツを含む td が表示され、そのコンテンツが表示されたら、col-rowspan
$table.data('col-td', $td);
$table.data('col-content', $ td.html());
$table.data('col-rowspan', 1)
}
}
});
}
//メモリをクリーンアップする関数
function destroy($table) {
$table.removeData();
}
})(jQuery);コードは確かに比較的単純ですが、いくつかの領域はまだ改善の余地があります
•処理対象のテーブルの内容はtbodyから検索されます。tbodyがない場合は、より一般的な解決策が与えられる必要があります。 🎜 >•for ( var i =cols.length - 1;cols[i] != unknown; i--)... テーブルのデータ量が多く、処理するカラム数が多い場合、ここでの最適化に失敗すると、ブラウザの問題 スレッドブロックのリスクを考慮して、setTimeout の使用を検討できます
• 他にも改善する価値のある点がたくさんあります。たくさんあるはずだと思います