本文以注释的方式标明了各个属性的功能。
(如果引用的js或者css不能使用了，可自己下载之后引用本地的js和css)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>handsontable测试</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable@7.0.2/dist/handsontable.full.min.css" />
</head>
<body>
<div id="example"></div>
<script src="https://cdn.jsdelivr.net/npm/handsontable@7.0.2/dist/handsontable.full.min.js"></script>
<script type="text/javascript">
var objectData = [{
id: 1,
name: 'Ted Right',
address: '重庆',
content: '其它'
},
{
id: 2,
name: 'Frank Honest',
address: '北京',
content: '其它'
},
{
id: 3,
name: 'Joan Well',
address: '天津',
content: '其它'
},
{
id: 4,
name: 'Gail Polite',
address: '内蒙',
content: '其它'
},
{
id: 5,
name: 'Michael Fair',
address: '黑龙江',
content: '其它'
},
],
container = document.getElementById('example');
//通过 JSON.parse(JSON.stringify(object)) 的方式,将数据的副本绑定到handsontable,这样handsontable改变数据的时候,不会影响到数据源,只会影响到副本
var dataCopy=JSON.parse(JSON.stringify(objectData));
var hot = new Handsontable(container, {
//调用handsometable的绑定数据的方式是: hot.getData()
data: dataCopy,
//定义数据源为空时,handsontable的数据格式
dataSchema: {
id: null,
name: null,
address: null,
content: null
},
colWidths: 300, //列宽
rowHeights: 83, //行高
//通过定义width和height来决定容器的宽和高,当内容超出时,便会显示滚动条
height: 450,
'50%',
//通过设置fixedRowsTop来决定滚动时,锁定的行;通过设置fixedColumnsLeft来决定滚动时,锁定的列
fixedColumnsLeft: 2,
//设置列名
colHeaders: ['', '姓名', '地址', '备注'],
//设置显示行索引
rowHeaders: true,
//许可秘钥
licenseKey: 'non-commercial-and-evaluation',
//留出一行空白,用作新增
minSpareRows: 1,
//隐藏的列索引 例:columns:[0,1,2],隐藏0,1,2三列
//如果需要显示隐藏列的位置标识,可以在hiddenColumns中加上 indicators: true
hiddenColumns: {
columns: [0]
},
//className用作定义表格的对齐方式,多个值用空格隔开
//水平方向上的值: htLeft, htCenter, htRight, htJustify
//垂直方向上的值: htTop, htMiddle, htBottom
className: "htCenter htMiddle",
//定义列和数据源的映射关系和一些其它属性
columns: [
{
data: 'id'
},
{
data: 'name',
// readOnly: true //定义为只读列
},
{
data: 'address'
},
{
data: 'content'
},
],
//当table数据发生改变的相应事件
afterChange: function(change, source) {
//change[0]是一个数组,第一个值是行索引/行名,第二个值是列索引/列名,第三个值是修改前的值,第四个值是修改后的值
//source的值目前知道:loadData(加载数据);edit(新增或编辑)
if (source === 'loadData') {
return;
}
//如果修改的列是ID列,不作处理,防止进入死循环
if(change[0][1]=='id'){
return;
}
if (dataCopy[change[0][0]].id==null) {
console.log("新增");
//生成新列的ID
let mId=new Date().getTime();
hot.setDataAtCell(change[0][0],0,mId);
console.log("新ID："+mId);
} else {
console.log("修改了ID为：" + dataCopy[change[0][0]].id + "的数据,值由" + change[0][2] + "修改为：" + change[0][3]);
}
}
});
</script>
</body>
</html>
这里只演示了一些常见的功能，更多功能请参考官网API：https://handsontable.com/docs/7.0.2/tutorial-quick-start.html