使用jquery扩展表格行合并方法探究

1.前言

　　最近项目中用到一个表格中对于相同内容的数据进行行合并的需求,本来想从网上找个现成的,省的自己再造轮子.于是就开始谷歌了...不过在搜索的过程中,发现找到的工具类很多都有一个前提,就是该表格中还没有行合并的单元格,即没有rowspan属性的的简单表格.那么我的问题来了,如果我的表格不是一个简单的表格呢,或者说我按照某一列合并之后,继续想合并其他列该如何处理呢.继续谷歌...(在此没有跟谷歌打广告的意思谢谢).没办法,自己造轮子吧.

2.简单的想法

　　如果才能获取某个表格的某一列数据呢,在此不能想当然的把表格想象成简单的表格,我需要造一个尽可能通用一点的轮子.

$("td:nth-child(" + trIndex + ")")

通过上面的代码,(其中trIndex代表某一列的索引)可以得到相同列索引的单元格.but,有个前提,表格中没有rowspan属性,更加准确的说没有rowspan值大于1的单元格.那么我想造通用轮子的方法,目前而言不能使用这个方法了,不过这个代码放这里,以后还有用处.

3.基本分析

　　现在分析一下对于一个5行5列表格中已经存在行合并的单元格该如何处理呢?比如第一行,第一个单元有个属性rowspan=2,表示的含义不用我来说了,那么jquery取如何理解呢,jquery会这么想,第一行有5个单元格,第二行有4个单元格.如下面的表格.此时第二行的第一个单元格时'67890'.可以这么理解,从有属性rowspan>1的单元格列索引以后的下几行数据的列索引都会发生变化.稍微有些难理解,即标记为红色的这一行单元格的列索引都会发生变化.

12345	67890	12345	67890	12345
67890	12345	67890	12345
12345	67890	12345	67890	12345
12345	67890	12345	67890	12345
12345	67890	12345	67890	12345

　　既然可以认识到这一点,那么我们的工作就完成一半了,剩下要做的就是把列索引由于行合并属性造成的错位修复回去,这样我们就可以使用上面的代码代码获取某一列的所有单元格,进而合并单元格中相同内容了.首先我自定义了一个属性rowspanMark,用来标记需要修正的单元格,以及修正的数目,比如说,第二行第一列'67890'所在这行,本来列索引应该是1,但是由于第一行第一列行合并导致,这一行的索引变成了0,那么就在这一单元上的rowspanMark标记成1,加上列索引0,即修正为真正的列索引.好了,原理讲清楚了,直接上代码,代码中也有注释,不清楚的可以留言.

(function ($) {
/**
*  标记所有rowspan之后导致其后的单元格cellindex减少的现象.
*/
$.fn.addRowspanMark = function () {
this.each(function () {
$(this).find("tbody tr").each(function (trIndex) {
trIndex = trIndex + 1;
//从index=0开始查找
// :nth-child从1开始的
$("td:nth-child(" + trIndex + ")").each(function (tdIndex, tdItem) {
var temp = tdItem;
//按照列的顺序找到所有的rowspan属性的单元格
var rowspanCount = $(tdItem).attr("rowspan");
//如果单元格属性rowspan大于则说明该单元格有合并同列下面的单元格
if (rowspanCount > 1) {
//修正当前rowspan属性大于的单元格在所在行的索引值
var tdItemIndexAmend = $(tdItem)[0].cellIndex + getRowspanMark($(tdItem));
//找到当前单元格的最近的父元素tr
var parent = $(tdItem).parent("tr")[0];
while (rowspanCount-- > 1) {
//依次处理当前单元格以下的单元
parent = $(parent).next();
//遍历tr中的所有单元格
$(parent).find("td").each(function (index, ele) {
//修正当前单元格的索引值
var curIndexAmend = index + getRowspanMark($(ele));
//当前单元格大于等于合并单元格时
if (curIndexAmend >= tdItemIndexAmend) {
//满足条件后重新修正符合条件单元格rowspanMark属性
$(ele).attr("rowspanMark", getRowspanMark($(ele)) + 1);
}
});
}
}
});
});
});
};

/**
* 删除所有rowspanMark标记.
*/
$.fn.removeRowspanMark = function () {
$(this).find("td").each(function (index, ele) {
if ($(ele).attr("rowspanMark") != undefined) {
$(ele).removeAttr("rowspanMark");
}
});
};

/**
* 合并行.
* @param options
*          [colIndex]  待合并列索引
*/
$.fn.rowspan = function (options) {
var defaults = {};
options = $.extend(defaults, options);

this.each(function () {
//增加标记属性
$(this).addRowspanMark();

//遍历所有单元,找到经过修正后与参数中合并列索引相等的单元
var tds = $(this).find("tbody td").filter(function () {
//找到标记
var rowspanMark = getRowspanMark($(this));
//找到当前单元格的列索引
var cellIndex = $(this)[0].cellIndex;
//重新修正
return rowspanMark + cellIndex == options.colIndex;
});

//暂存满足条件的第一个元素
var current_td = tds.eq(0);
//遍历
tds.each(function (index) {
//上一元素与当前元素内容相同则进行合并
if ($(this).text() == current_td.text() && index != 0) {
//计算当前元素的rowspan
var thisSpan = getRowspan($(this));
//计算上一个元素的rowspan
var currentTdSpan = getRowspan(current_td);
//删除该元素
$(this).remove();
//将上一元素rowspan设置为两个元素的和
current_td.attr("rowspan", currentTdSpan + thisSpan);
} else {
//不满足条件继续遍历
current_td = $(this);
}
});

//删除标记属性
$(this).removeRowspanMark();
});

};

/**
* 获取当前元素的rowspanMark值
*/
function getRowspanMark(ele) {
return ele.attr('rowspanMark') == undefined ? 0 : parseInt(ele.attr('rowspanMark'));
}

/**
* 获取当前元素的rowspanMark值
*/
function getRowspan(ele) {
return ele.attr('rowspan') == undefined ? 1 : parseInt(ele.attr('rowspan'));
}
})(jQuery);

末了,加上适用方式:代码中的0表示待合并的列索引

$("#mergeTable").rowspan({colIndex: 0});

　 最后多唠叨一句,记得加上jquery的包,本来这个方法是扩展jquery方法.另外,该方法只适用行合并,不适用列合并.有时间再研究列合并.

　　感谢大家阅读,希望我的共享可以为你提供些许帮助.如有bug,请留言,谢谢