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

效果如下

原表格:

col0	col1	col2	col3
SuZhou	11111	22222	SuZhouCity
SuZhou	33333	44444	SuZhouCity
SuZhou	55555	66666	SuZhouCity
ShangHai	77777	88888	ShangHaiCity
ShangHai	uuuuu	hhhhh	ShangHaiCity
ShangHai	ggggg	ccccc	ShangHaiCity
GuangZhou	ttttt	eeeee	GuangZhouCity
GuangZhou	ppppp	qqqqq	GuangZhouCity

处理之后的样子:

col0	col1	col2	col3
SuZhou	11111	22222	SuZhouCity
	33333	44444
	55555	66666
ShangHai	77777	88888	ShangHaiCity
	uuuuu	hhhhh
	ggggg	ccccc
GuangZhou	ttttt	eeeee	GuangZhouCity
	ppppp	qqqqq

効果結果、看上去比较简单、下先看下页面

复制代码代码如下:

頭>

col0	col1	col2	col3
蘇州	11111	22222	蘇州市
蘇州	33333	44444	蘇州市
蘇州	55555	66666	蘇州市
上海	77777	88888	上海市
上海	うううう	うーん	上海市
上海	ggggg	ccccc	上海市
広州	ttttt	ええええ	広州市
広州	ppppp	qqqqq	広州市

核心代:

复制代 代码如下:

// ここに書かれた一つの 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 の使用を検討できます
• 他にも改善する価値のある点がたくさんあります。たくさんあるはずだと思います