<!DOCTYPE html>

<html>

	<head>

		<title>handsontable demo</title>

		<meta charset="utf-8">

		<link rel="stylesheet" href="css/handsontable.full.css">

		<script src="js/jquery.js"></script>

		<script src="js/handsontable.full.js"></script>

	</head>

	<body>

		<div id="example"></div>

		<script>

			var data = [

				['2017-01', '北京', '冰箱', '3399', 530],

				['2017-01', '天津', '空调', '4299', 522],

				['2017-01', '上海', '洗衣机', '1299', 544],

				['2017-01', '广州', '彩电', '4599', 562],

				['2017-01', '深圳', '热水器', '1099', 430],

				['2017-02', '重庆', '笔记本电脑', '4999', 666],

				['2017-02', '厦门', '油烟机', '2899', 438],

				['2017-02', '青岛', '饮水机', '899', 620],

				['2017-02', '大连', '手机', '1999', 500]

			];

			var hot = new Handsontable(document.getElementById('example'),{

				data: data,

				colHeaders: ['日期', '地点', '商品', '单价', '销量'], // 使用自定义列头

				rowHeaders: true,

				editor: false, // 禁用所有单元格编辑

				colWidths: 150, // 设置所有列宽为150像素

                contextMenu: false, // 禁用右键菜单

				mergeCells: [

					{row:0, col:0, rowspan:5, colspan:1},

					{row:5, col:0, rowspan:4, colspan:1}

				],

	            cell: [

	                {row: 0, col: 0, className: "htCenter htMiddle"}, // 设置下标为0,0的单元格样式 水平居中、垂直居中

	                {row: 5, col: 0, className: "htCenter htMiddle"}

	            ]

			});

		</script>

	</body>

</html>

　　

上面我们已经将右键菜单禁用掉，现在将使用js对容器插入行列，并初始化插入列的数据

再结合alter与setDataAtCell方法我们将在下面做一个简单的例子：

// 在索引9行之前插入2个空行

hot.alter('insert_row', 9, 2);

// 对2个空行进行填充数据

hot.setDataAtCell([

	[9, 0, '2017-03'],

	[9, 1, '武汉'],

	[9, 2, '路由器'],

	[9, 3, 149],

	[9, 4, 692],

	[10, 0, '2017-03'],

	[10, 1, '杭州'],

	[10, 2, '移动电源'],

	[10, 3, 99],

	[10, 4, 785]

]);

hot.alter('remove_row', 6); // 移除索引为6的行

　　

由于我们刚开始设置了合并列，现在删除第6行后，后面几行数据将会追加上去，所以新添加的一行（日期列）会被合并掉

handsontable 合并单元格的更多相关文章

  1. Handsontable对单元格的操作

    1.自动填充单元格数据 fillHandle:true/false    //当值为true时,允许拖动单元格右下角,将其值自动填充到选中的单元格 2.合并单元格 mergeCells:[{row:起 ...

  2. [转]Handsontable对单元格的操作

    原文地址:http://blog.csdn.net/mafan121/article/details/46119905 1.自动填充单元格数据 fillHandle:true/false    //当 ...

  3. C# 获取Excel中的合并单元格

    C# 获取Excel中的合并单元格 我们在制作表格时,有时经常需要合并及取消合并一些单元格.在取消合并单元格时需要逐个查找及取消,比较麻烦.这里分享一个简单的方法来识别Excel中的合并单元格,识别这 ...

  4. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  5. NPOI操作EXCEL（五）——含合并单元格复杂表头的EXCEL解析

    我们在第三篇文章中谈到了那些非常反人类的excel模板,博主为了养家糊口,也玩命做出了相应的解析方法... 我们先来看看第一类复杂表头: ...... 博主称这类excel模板为略复杂表头模板(蓝色部 ...

  6. poi获取合并单元格内的第一行第一列的值

    当读取如图所示的excel时,显示为第1行 第1列 的内容是:合并单元格 其它在合并单元格区域内的单元格不显示 示例代码如下: import java.io.FileInputStream; impo ...

  7. Repeater多列分别合并单元格

    GridView.Repeater合并单元格可以参考http://www.cnblogs.com/zhmore/archive/2009/04/22/1440979.html,但是原文例子是合并一列的 ...

  8. Aspose.Cells 首次使用，用到模版填充数据，合并单元格，换行

    Aspose.Cells 首次使用,用到模版填充数据,合并单元格,换行 模版格式,图格式是最简单的格式,但实际效果不是这种,实际效果图如图2 图2 ,注意看红色部分,一对一是正常的,但是有一对多的订单 ...

  9. easyui datagrid 合并单元格

    整理以前做的东西,这个合并单元格的问题再新浪博客也写过了..... 下面这段代码是列表数据 //载入排放系数管理报表数据 function LoadEmissionReportData() { //获 ...

随机推荐

  1. REST&RESTFUL

    REST(表征性状态传输,Representational State Transfer)指的是一组架构约束条件和原则.是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格 ...

  2. 简单了解下OSI七层模型的作用以及常见网络协议含义和所用端口

    OSI七层模型及每层的作用 包括:物理层.数据链路层.网络层.传输层.会话层.表示层.应用层物理层用来建立.维护.断开物理连接数据链路层建立逻辑链接.进行硬件地址寻址.差错校验等功能网络层进行逻辑地址 ...

  3. uva 1583

    枚举1~100000把所有数的最小generators记录下来,直接查表即可. AC代码: #include<cstdio> #include<cstring> #includ ...

  4. nyoj 1129 Salvation 模拟

    思路:每个坐标有四种状态,每个点对应的每种状态只能走一个方向,如果走到一个重复的状态说明根本不能走到终点,否则继续走即可. 坑点:有可能初始坐标四周都是墙壁,如果不判断下可能会陷入是死循环. 贴上测试 ...

  5. 使用org.apache.commons.logging打日志注意事项

    使用方法:例如,protected final Log logger = LogFactory.getLog(getClass());if (logger.isDebugEnabled()) { lo ...

  6. ubuntu追加磁盘空间

    在用wubi安装的时候,按默认的是20G空间,明显不够用,从Windows上追加空间 首先用win7自带的磁盘分区工具,从任意一个空余空间较多的磁盘划出一块新分区(无损数据)(如NTFS),作为ubu ...

  7. probabilistic robotics_Kalman filter(一)

    码农生活告一段落,继续.... 多元正态分布 协方差矩阵,为正定对称矩阵.det表示行列式 协方差反应随机样本变量各分量之间的相关性. 当变量的假设模型不一致时,不适合用高斯滤波. 叠加高斯噪声的线性 ...

  8. Pandaboard ES编译bootloader、xloader、内核、以及安卓系统

    Building bootloader and kernel Bootloader Startwith building the bootloader. To learn more about the ...

  9. 八爪鱼采集器︱加载更多、再显示20条图文教程（Xpatth、Ajax）

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 由于代码布置采集器比较麻烦,又很早知道八爪鱼采 ...

  10. PCI9054 学习小结

    PCI的基本协议这里就不介绍了,因为一般的芯片协议都是集成好的,我只需要大体了解就行,不需要做芯片,我感觉就不需要太了解协议. 这里讲解是基于PLX 的9054(9052)芯片为基础的,本人只是入门, ...