使用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,请留言,谢谢