Javascript实现合并单元格

　　Web上的报表或表格应用，较为复杂的表格操作一般都比较难实现，这里介绍一下用ComponentOne Studio for ASP.NET Wijmo中的SpreadJS，可以实现一些较为复杂的表格操作，个人认为他模仿桌面应用的操作体验非常不错，虽然我并不建议所有Web应用都去照搬桌面应用的交互，照搬桌面交互其实无助于Web应用体验的创新，但是办公应用没办法，谁叫甲方是老大呢。。。

　　接下来我们要说的单元格合并，即将一系列的单元格合并成一个新的跨几行或几列的单元格，这个功能在Excel中非常常见，在中国式报表中，合并单元格的目的一般是创建行列标题或者进行分类汇总。

　　我们就以一个简单的例子来说明操作步骤，要合并A1，B1，C1来创建一个叫“Monthly Sales”的行标题，只需要以下代码：

sheet.addSpan(0, 0, 1, 3);
sheet.getCell(0, 0).hAlign($.wijmo.wijspread.HorizontalAlign.center)
sheet.setValue(0, 0, "Monthly Sales");
sheet.setValue(1, 0, "Jan");
sheet.setValue(1, 1, "Feb");
sheet.setValue(1, 2, "Mar");

　　然后就是下面合并的结果：

　　当然，也有可能有另外一种需求，也就是想要合并工作表中的列标题或行标题，如下所示：

　　这个Wijmo也是可以实现的，需要使用addSpan方法来增加如下SheetArea的参数：

sheet.addSpan(0, 0, 1, 3, $.wijmo.wijspread.SheetArea.colHeader);

　　删除合并单元格也非常简单，使用removeSpan方法就可以了：

var spans = sheet.getSpans();
for(var i = 0; i < spans.length; i++) {sheet.removeSpan(spans.row,spans.col);
}

转载于:https://www.cnblogs.com/uncleshu/p/3222799.html

Javascript实现合并单元格相关推荐

JavaScript JS合并单元格 rowspan
功能模块用到了合并单元格,网上看了下大都是转来转去的,而且多列合并时,没有判断前面的列是否存在合并, 造成后续列合并与前列有冲突,于是花时间写了一个判断依据是取需要判断的第一行数据,循环剩下的数据行 ...
ExtJs grid合并单元格
extjs中,如果要输出一些有合并单元格的表格,要怎么做呢?如图所示: 从网上找了个例子,其主要思想是表格的store装载完毕后,随即对这个grid的td进行一个个的控制,用的方法也是原始的javas ...
【表格设置】HTML中合并单元格，对列组合应用样式，适应各浏览器的内容换行
1.常用表格标签普通 <table> | <tr> | | <th ...
Bootstrap-表格合并单元格
1.问题背景利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 <!DOCTYPE html> <html><head><meta cha ...
jquery操作表格合并单元格
$('#table_2').mergeCell({cols: [7,8,9] ///参数为要合并的列,例如[0,5],表示第0和第5列});/** * 操作表格合并单元格行 * 2016年12月1 ...
【JqGrid】jqgrid合并单元格
1.jqgrid官方的事件和方法 http://www.trirand.com/jqgridwik ... %5B%5D=gridcomplete http://www.trirand.com/jqg ...
前端导出 excel ，设置字体，列宽，行高，对其方式，合并单元格等效果
一.先看实现后的图二.技术这个表格主要采用了 xlsx-style 来实现 https://www.npmjs.com/package/xlsx-style https://github.com/ ...
layui table 表头合并_layui 动态表格之合并单元格
需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...
纯前端js(或者vue)导出excel实现：合并单元格、设置单元格样式、单元格内换行
前提是安装xlsx,已经可以导出普通的excel npm install --save xlsx file-saver 然后需要安装 npm install xlsx-style 如果运行的时候报错 ...

Javascript实现合并单元格

Javascript实现合并单元格相关推荐

最新文章

热门文章