html表格cell合并插件
2015-06-17 15:09
477 查看
数据展示时需要合并部分数据自己写了一个简单插件
合并前:
合并后:
调用示例:
参数说明:
第一个参数是要处理合并的行, 第二个参数是合并条件, 比如列1和列2对应值相等什么的, 支持多条件, 第三个参数是要合并的列
合并插件:
合并前:
合并后:
调用示例:
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中meta标签详解
- 多选解决方案
- 圆形切换按钮
- 让IE依据HTML头标签选择显示模式
- 【搜索引擎Jediael开发笔记3】使用HtmlParser提取网页中的链接
- HtmlParser基础教程
- html 清除浏览器中的缓存
- html 查看html元素绑定的事件与方法的利器
- HTML formatting
- html中META的作用
- HTML paragraph
- webbrowser处理HTML Element Event事件
- HTML heading
- Html语义化的理解
- VS2013默认打开HTML文件没有设计视图的解决办法
- 解决WinForm应用中引用“mshtml”出现“强名称签名对程序集 Microsoft.mshtml.dll 无效”
- Detecting character encoding in HTML
- 关于使用Html <audio>标签播放视频文件的问题
- 上传文件以中文方式命名,放入html标签会报错
- 向WebBrowser控件插入HTML代码