数据展示时需要合并部分数据自己写了一个简单插件

合并前:

合并后:

调用示例:

        var trs = $('table#dataList tbody tr').not('#demo').get();
var cellMerger = new CellMerger();
//合并大区
cellMerger.merge(trs, new Array('MSGNUMBER','LARGEAREA'), new Array('LARGEAREA'));
cellMerger.merge(trs, new Array('MSGNUMBER'), new Array('option','statusName','TITLE','MSGNUMBER','CREATEOWNER','CTIME'));

参数说明:

第一个参数是要处理合并的行, 第二个参数是合并条件, 比如列1和列2对应值相等什么的, 支持多条件, 第三个参数是要合并的列

合并插件:

function CellMerger(){
} CellMerger.prototype.merge = function (trs, needIndexs, mergedIndexes){
var mergeds = new Array();
for(x in mergedIndexes){
mergeds.push("td[index="+mergedIndexes[x]+"]");
}
var needs = new Array();
for(x in needIndexs){
needs.push("td[index="+needIndexs[x]+"]");
}
this.mergeCell(trs, needs, mergeds);
}; CellMerger.prototype.conditionMatch = function (targets, currents){
if(targets.length==0 && currents.length==0){
return true;
}
if(targets.length != currents.length){
return false;
}
for(x in targets){
if(targets[x]!=currents[x]){
return false;
}
}
return true;
}; CellMerger.prototype.rowspanAndRemove = function (trs, curIndex, sames, mergeds){
var rowspan=sames.length+1;
for(x in mergeds){
$(trs[curIndex]).children(mergeds[x]).attr('rowspan',rowspan);
}
for(var j=0;j<sames.length;j++){
for(x in mergeds){
$(trs[sames[j]]).children(mergeds[x]).remove();
}
}
}; CellMerger.prototype.mergeCell = function (trs, needs, mergeds){
var targets = new Array();
var curIndex = 0;
var sames = new Array();
for(var i=0;i<trs.length;i++){
var current = new Array();
for(x in needs){
current[x] = $(trs[i]).children(needs[x]).html();
}
if(targets.length == 0){
//初始化比对条件
curIndex = i;
for(x in needs){
targets[x] = $(trs[i]).children(needs[x]).html();
}
}
else{
if(this.conditionMatch(targets, current)){
sames.push(i);
//最后一条进行向前合并
if(i == trs.length-1 && sames.length>0){
this.rowspanAndRemove(trs, curIndex, sames, mergeds);
}
}
else{
//合并相似项
if(sames.length>0){
this.rowspanAndRemove(trs, curIndex, sames, mergeds);
}
//清空数组, 重置比较索引
curIndex = i;
sames = new Array();
for(x in needs){
targets[x] = $(trs[i]).children(needs[x]).html();
}
}
}
}
};

html表格cell合并插件的更多相关文章

  1. ASP.NET中重复表格列合并的实现方法(转自脚本之家)

    这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下.NET控件GridView 和 Repeater 关于重复数据合并的方法. 这是合并之前的效果: 合并之后的效果图 ...

  2. 支持10种格式的 HTML 表格导出 jQuery 插件

    HTML 表格导出 jQuery 插件可以帮助用户导出 HTML 表格到 JSON.XML.PNG.CSV.TXT.SQL.MS-Word.MS-Excel.MS-PowerPoint 和 PDF 格 ...

  3. ExtJS4.2学习(13)基于表格的扩展插件---rowEditing

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-24/182.html --------------- ...

  4. CSS之表格边框合并、兄弟标签外边距合并、父子标签的外边距合并

    本文内容: 表格边框合并 兄弟标签外边距合并 父子标签的外边距合并 首发日期:2018-05-01 表格边框合并: 发生情况: 当设置了cellpadding="0" cellsp ...

  5. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  6. 适用于iview的表格转Excel插件

    在网上找的一个表格转excel插件,经过修改后使其适用于iview中的table组件 let idTmr; const getExplorer = () => { let explorer = ...

  7. Bootstrap-table实现动态合并相同行(表格同名合并)

    写在前面: 有时候表格的需求就是奇奇怪怪的,最近要做的表格需要实现当紧挨着的记录的某一列的行元素内容相同,就将其合并.要是不是相同的就不合并.如果表格数据的顺序不需要被改变,这个样子是可以很简单就完成 ...

  8. IOS tableView 去除分割线 和 不允许选中表格cell

    //去除分割线 self.tableView.backgroundColor=[UIColor colorWithRed:///255.0 alpha:1.0]; self.tableView.sep ...

  9. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...

随机推荐

  1. python 脚本查看微信把你删除的好友--win系统版

    PS:目测由于微信改动,该脚本目前不起作用 下面截图来自原作者0x5e 相信大家在微信上一定被上面的这段话刷过屏,群发消息应该算是微信上流传最广的找到删除好友的方法了.但群发消息不仅仅会把通讯录里面所 ...

  2. C++:memset ,memcpy 和strcpy 的根本区别!

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <assert.h&g ...

  3. Solr4.7新建core

    Solr里面的core就像数据库里面的一个表,用来管理索引和相关配置. 一. 使用示例core 下载的solr完整包里面solr-4.7.0\example\multicore这个文件夹下面有2个示例 ...

  4. Java中正确使用hashCode() 和equals() 、==

    在java编程中,经常会遇到两个对象中某个属性的比较,常常会用到的方法有: == .equals().但是两者使用起来有什么区别呢? 一.== java中的==是比较两个对象在JVM中的地址.比较好理 ...

  5. ios开发,地图标注聚集。搜索标注title功能

    最近在做地图功能,要实现的就是地图标注聚集,还有搜索地图 地图标注通常都是大头针.如果地图缩小到一定范围的时候,会显示密密麻麻的大头针.这样会显的难看 所以设计了一定区域范围内的大头针,缩小的时候给聚 ...

  6. javascript变量,类型 第9节

    1.变量,数据类型 <html> <head> <title>变量</title> </head> <body> <h3& ...

  7. 09_Mybatis开发Dao方法——mapper代理开发规范

    一.开发规范 需要编写mapper.xml映射文件(本项目为userMapper.xml,类似于前面的user.xml). 编写mapper接口需要遵循一些开发规范,这样MyBatis可以自动生成ma ...

  8. VIM 及正则表达式

    VIM及正则表达式 一.查找/Search + 统计 1.统计某个关键字 方法是:%s:keyword:&:gn. 其中,keyword是要搜索的关键字,&表示前面匹配的字符串,n表示 ...

  9. [USACO1.2.2]方块转换 Transformations

    P1205 [USACO1.2]方块转换 Transformations 标签 搜索/枚举 USACO 题目描述 一块N x N(1<=N<=10)正方形的黑白瓦片的图案要被转换成新的正方 ...

  10. starling 中的 EventDispatcher 和 Flash中原生的 EventDispatcher

    starling 比较早之前就有开始解了,但只到最近参与一个用starling 做为框架的手游项目才真正做为一程来使用它. 项目也是刚开始搭建,在这做些笔记. 在写一个管理类时, 遇到 starlin ...