Home > Web Front-end > JS Tutorial > body text

Plug-in for merging the same cells in a table based on jquery (lite version)_jquery

WBOY
Release: 2016-05-16 18:08:30
Original
1118 people have browsed it

效果如下

原表格:

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
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


核心代码:
复制代码 代码如下:

// 这里写成了一个jquery插件的形式
$('#process').mergeCell({
// 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始
// 然后根据指定列来处理(合并)相同内容单元格
cols: [0, 3]
});

下面看看这个小插件的完整代码:
复制代码 代码如下:

;(function($) {
// After looking at the jquery source code, you can find that $.fn is $.prototype, jQuery is only retained for compatibility with earlier versions of the plug-in
// The form of prototype
$.fn.mergeCell = function(options) {
return this.each(function() {
var cols = options.cols;
for ( var i = cols.length - 1; cols[i] != undefined; i--) {
// fixbug console debugging
// console.debug(cols[i]);
mergeCell($(this), cols [i]);
}
dispose($(this));
});
};
// If you have a clear understanding of the concepts of closure and scope in JavaScript, this is a plug-in Private methods used internally
// For details, please refer to the book introduced in my previous essay
function mergeCell($table, colIndex) {
$table.data('col-content', ''); // Store cell content
$table.data('col-rowspan', 1); // Store calculated rowspan value, which defaults to 1
$table.data('col-td' , $()); // Store the first td found that is different from the previous row (encapsulated by jQuery), defaulting to an "empty" jquery object
$table.data('trNum', $( 'tbody tr', $table).length); //The total number of rows of the table to be processed, used for judgment when the last row is subjected to special processing
//The key is to "scan" each row of data. It is to locate col-td, and its corresponding rowspan
$('tbody tr', $table).each(function(index) {
// colIndex in td:eq is the column index
var $td = $('td:eq(' colIndex ')', this);
// Get the current content of the cell
var currentContent = $td.html();
// First Take this branch the next time
if ($table.data('col-content') == '') {
$table.data('col-content', currentContent);
$table. data('col-td', $td);
} else {
// The previous row has the same content as the current row
if ($table.data('col-content') == currentContent) {
// If the content of the previous row is the same as the current row, col-rowspan is accumulated and the new value is saved
var rowspan = $table.data('col-rowspan') 1;
$table.data(' col-rowspan', rowspan);
// It is worth noting that if $td.remove() is used, it will affect the processing of other columns
$td.hide();
// The situation in the last line is a bit special
// For example, the contents of the td in the last two lines are the same, then the td saved in col-td at this time should be set to rowspan in the last line
if ( index = = $table.data('trNum'))
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
} else { // The content of the previous row is different from the current row
// col-rowspan defaults to 1, if the calculated col-rowspan has not changed, it will not be processed
if ($table.data('col-rowspan') != 1) {
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
}
// Save the first Once a td with different content appears, and its content, reset col-rowspan
$table.data('col-td', $td);
$table.data('col-content', $ td.html());
$table.data('col-rowspan', 1);
}
}
});
}
// also private Function to clean up memory
function dispose($table) {
$table.removeData();
}
})(jQuery);

Main instructions It should be all in the comments. The code is indeed relatively simple, but some areas still deserve improvement
•The table content to be processed is searched starting from tbody. If there is no tbody, a more general solution should be given
•for ( var i = cols.length - 1; cols[i] != undefined; i--)... If the amount of table data is large and there are many columns processed, failure to optimize here will cause browser problems For the risk of thread blocking, you can consider using setTimeout
• There are many other things worth improving, I think there should be a lot
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!