handsontable 合并单元格

<!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行后，后面几行数据将会追加上去，所以新添加的一行（日期列）会被合并掉