最近在做项目时候,需求要求实现对表格中单元格列合并的功能,如果是只在某一列中进行合并操作,代码是遍历每行的某一列单元格,而这次的需求比较复杂,列数很多,都可以动态显示隐藏,原来的代码功能明显不够用了。
本插件主要用于表格单元格的纵向合并,前提,每行的tr里都有一个属性,比如data-pid,当上下行数据的这个属性值相等时,将一列或者多列的单元格纵向,用class标识需要合并的列。有的情况下,是只有少数列不合并,因此也支持用class标识不需要合并列。
HTML代码
title1title2title3title4title5title6
content1-1content1-2content1-3content1-4content1-5content1-6content2-1content2-2content2-3content2-4content2-5content2-6content3-1content3-2content3-3content3-4content3-5content3-6content4-1content4-2content4-3content4-4content4-5content4-6content5-1content5-2content5-3content5-4content5-5content5-6css代码
table {
border-collapse: collapse !important;
}
th,
td {
border: 1px solid #999;
padding: 10px 20px;
}
插件源码
(function ($) {
$.fn.rowSpan = function (options) {
return this.each(function (index, element) {
var that = undefined;
$('tr', this).each(function (trIndex, tr) {
var tdSelector = 'td';
if (typeof (options.mergeClass) !== 'undefined' && options.mergeClass.length > 0) {
tdSelector += '.' + options.mergeClass;
} else {
tdSelector += ':not(.' + options.notMergeClass + ')';
}
if (typeof that !== 'undefined' &&
typeof ($(tr).attr(options.onAttr)) !== 'undefined' &&
$(tr).attr(options.onAttr) === $(that).attr(options.onAttr)) {
var firstTd = $(that).children(tdSelector);
if (firstTd.length == 0) {
return true;
}
var rowpan = firstTd.prop('rowspan');
rowpan += 1;
$(that).children(tdSelector).prop('rowspan', rowpan);
$(this).children(tdSelector).hide();
}
else {
that = tr;
}
});
});
};
})(jQuery);
参数表
参数名
默认值
功能
onAttr
undefined
tr的属性名,两行数据中这个属性值相等时才进行合并
mergeClass
undefined
td的类名,当tr的onAttr值相等时,此td进行合并
notMergeClass
undefined
td的类名,当tr的onAttr值相等时,除此td以外其他td合并(当mergeClass无有效值时才启用)
调用方法
//调用实例 table 为页面里的表格
$('table').sdrowpan({
onAttr: 'data-pid', //tr的属性名,两行数据中这个属性值相等时才进行合并
mergeClass: 'doMerge', //td的类名,当tr的onAttr值相等时,此td进行合并
notMergeClass: 'notMerge' //td的类名,当tr的onAttr值相等时,除此td以外其他td合并(**当mergeClass无有效值时才启用**)
});
示例效果
$('table').sdrowpan({
onAttr: 'data-pid', //tr的属性名,两行数据中这个属性值相等时才进行合并
mergeClass: 'doMerge' //td的类名,当tr的onAttr值相等时,此td进行合并
});
上面调用代码效果截图显示:
再来看看换种调用方式:
$('table').sdrowpan({
onAttr: 'data-pid', //tr的属性名,两行数据中这个属性值相等时才进行合并
notMergeClass: 'notMerge' //td的类名,当tr的onAttr值相等时,除此td以外其他td合并(**当mergeClass无有效值时才启用**)
});
上面调用代码效果截图显示:
接下来是根据table相邻行的重复内容合并插件方法,推荐给大家参考
内容合并插件源码
$.fn.extend({
//表格合并单元格,colIdx要合并的列序号,从0开始
"rowspan": function (colIdx) {
return this.each(function () {
var that;
$('tr', this).each(function (row) {
$('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
if (that != null && $(this).html() == $(that).html()) {//$(this).attr('id') == $(that).attr('id')
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan", 1);
rowspan = $(that).attr("rowSpan");
}
rowspan = Number(rowspan) + 1;
$(that).attr("rowSpan", rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
}
});
调用方法
function initLoad() {
$("#process").rowspan(0);
$("#process").rowspan(1);
}
需要那列内容就填写那列序号即可,默认从0开始
以上就是今天全部内容,内容来源网络收集,如果遇到本插件满足不了需求的情况,大家可以参考代码,根据代码处理逻辑修改出试用于自己需求的插件。