<!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行后，后面幾行數據將會追加上去，所以新添加的一行（日期列）會被合並掉
