jquery表格合并插件


placeholder image
admin 发布于:2015-06-10 15:31:36
阅读:loading

前一段时间需要使用单元格合并,网上查了N下,找到了一个jquery实现的合并单元格插件,比较简单,其中在项目里面使用到了纵向合并单元格的功能(横向没有用到,故不敢保证一定没问题),参考代码如下:

横向合并

     //函数说明:合并指定表格(表格id_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格

 //参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data 
//
参数说明:
_w_table_colnum 为需要合并单元格的所在列。为数字,从最左边第一列为1开始算起。
function _w_table_rowspan(_w_table_id, _w_table_colnum) {
   
_w_table_firsttd = "";
   
_w_table_currenttd = "";
   
_w_table_SpanNum = 0;
   
_w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
    
_w_table_Obj.each(function(i) {
       
if (i == 0) {
           
_w_table_firsttd = $(this);
           
_w_table_SpanNum = 1;
        }
else {
           
_w_table_currenttd = $(this);
           
if (_w_table_firsttd.text() == _w_table_currenttd.text()) {
               
_w_table_SpanNum++;
               
_w_table_currenttd.hide(); // remove();
               
_w_table_firsttd.attr("rowSpan", _w_table_SpanNum);
            }
else {
               
_w_table_firsttd = $(this);
                
_w_table_SpanNum = 1;
            }
        }
    });
}

横向合并
// 函数说明:合并指定表格(表格id_w_table_id)指定行(行数为_w_table_rownum)的相同文本的相邻单元格
// 参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data
//
参数说明:
_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuerynth-child的参数。
// 如果为数字,则从最左边第一行为1开始算起。
// "even" 表示偶数行
// "odd" 表示奇数行
// "3n+1" 表示的行数为14710.......
//
参数说明:
_w_table_maxcolnum 为指定行中单元格对应的最大列数,列数大于这个数值的单元格将不进行比较合并。
// 此参数可以为空,为空则指定行的所有单元格要进行比较合并。
function _w_table_colspan(_w_table_id, _w_table_rownum, _w_table_maxcolnum) {
   
if (_w_table_maxcolnum == void 0) {
        _w_table_maxcolnum =
0;
    }
   
_w_table_firsttd = "";
   
_w_table_currenttd = "";
   
_w_table_SpanNum = 0;
   
$(_w_table_id + " tr:nth-child(" + _w_table_rownum + ")").each(function(i) {
       
_w_table_Obj = $(this).children();
       
_w_table_Obj.each(function(i) {
           
if (i == 0) {
               
_w_table_firsttd = $(this);
               
_w_table_SpanNum = 1;
            }
else if ((_w_table_maxcolnum > 0) && (i > _w_table_maxcolnum)) {
               
return "";
            }
else {
               
_w_table_currenttd = $(this);
               
if (_w_table_firsttd.text() == _w_table_currenttd.text()) {
                   
_w_table_SpanNum++;
                   
_w_table_currenttd.hide(); // remove();
                   
_w_table_firsttd.attr("colSpan", _w_table_SpanNum);
                }
else {
                   
_w_table_firsttd = $(this);
                   
_w_table_SpanNum = 1;
                }
            }
        });
    });
}
function rowspanGrid(gridId , columnNumber){
   
var rows = $("#" + gridId).jqxGrid('getrows');
   
if(rows.length > 0){
       
var first = "";
       
var current = "";
       
var spanNum = 0;
       
var tds = $("#contenttable" + gridId + " > div");
       
if(tds.length == 0){
           
return;
        }
       
tds.each(function(i){
           
if(i > rows.length){
               
return;
            }
           
var td = $(this).find("div:nth-child(" + columnNumber + ")");
           
if(i == 0){
               
first = td;
               
spanNum = 1;
            }
else{
               
current = td;
               
if (first.text() == current.text()) {
                    
spanNum++;
                   
current.hide(); // remove();
                   
var height = spanNum * 25;
                   
first.css({
                       
"line-height" : (height) + "px",//由于子元素中设置了margin-top=4
                       
"height" : height + "px"
                   
});
                }
else {
                   
first = td;
                   
spanNum = 1;
                }
            }
        });
    }
}

运行结果

image.png

以上的代码实现其实是根据对比连续相邻的td的内容,当存在连续相同的数据,但是又不是一类的数据时,可以在文本显示的地方加一个能够确认唯一的一个标识<label/>将其隐藏起来,来做到数据列的有效合并。

此种方式的实现比较简单,但比较好用,经过改造已适用于jqWidgets、Bootstrap、CTP等UI框架中的table组件中。

上述许多内容已经过时和过期了,留存本篇文章仅为方便个人查看,原始文章的信息参考:

原始链接:https://www.chendd.cn/information/viewInformation/other/122.a

最后更新:2015-06-10 15:31:36

访问次数:479

评论次数:0

点赞个数:0

 点赞


 发表评论

当前回复:作者

 评论列表


留言区