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