完整demo代码
包含添加行
删除行,
添加列
删除列
合并单元格
撤回等
<!doctype html>
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">
<link rel="stylesheet" type="text/css" href="https://handsontable.com/static/css/main.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script> -->
<script src="../js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="./handsontable/handsontable.full.min.css" />
<link rel="stylesheet" type="text/css" href="./handsontable/main.css" />
<script type="text/javascript" language="JavaScript" src="./handsontable/handsontable.full.min.js"></script>
<style>
#hot-display-license-info{
display: none;
}
#metrical_node_table table thead tr th{
background-color: rgb(199, 232, 181);
color: rgb(0, 0, 0);
height: 30px;
line-height: 30px;
}
#metrical_node_table table tbody tr th{
height: 30px;
line-height: 30px;
}
#metrical_node_table table tbody tr td{
height: 30px;
line-height: 30px;
}
#metrical_node_table table thead tr th .changeType {
margin-top: 8px;
}
</style>
</head>
<body>
<div>
<div>
<button id="editTable">获取数据</button>
</div>
<div id="metrical_node_table"></div>
</div>
<script>
var hotElement = document.querySelector('#metrical_node_table');
var hotElementContainer = hotElement.parentNode;
// 表格数据
var dataObject = [
{
id: 1,
flag: 'EUR',
currencyCode: 'EUR',
currency: 'Euro',
level: 0.9033,
units: 'EUR / USD',
asOf: '08/19/2019',
onedChng: 0.0026
},
{
id: 2,
flag: 'JPY',
currencyCode: 'JPY',
currency: 'Japanese Yen',
level: 124.3870,
units: 'JPY / USD',
asOf: '08/19/2019',
onedChng: 0.0001
},
{
id: 3,
flag: 'GBP',
currencyCode: 'GBP',
currency: 'Pound Sterling',
level: 0.6396,
units: 'GBP / USD',
asOf: '08/19/2019',
onedChng: 0.00
}
];
//表格配置
var columns = [
{
data: 'id',
type: 'numeric',
width: 40,
className: 'htCenter', //设置表格居中
},
{
data: 'flag',
//renderer: flagRenderer //设置单列渲染修改
},
{
data: 'currencyCode',
type: 'text'
},
{
data: 'currency',
type: 'text'
},
{
data: 'level',
type: 'numeric',
numericFormat: {
pattern: '0.0000'
}
},
{
data: 'units',
type:'dropdown',
source:['1F-中','2F','3F','4F','5F','...']
},
{
data: 'asOf',
type: 'date',
dateFormat: 'MM/DD/YYYY'
},
{
data: 'onedChng',
type:'autocomplete',
source:['1F-中','2F','3F','4F','5F','...'],
strict: true, //值为true,严格匹配
allowInvalid: true //值为true时,允许输入值作为匹配内容,只能在strict为true时使用
}
];
var data = [
['序号','1','2','3'],
['1', '4', ‘3’, '30'],
['2', '5', '4', '40'],
['3', '6', '5', '50'],
['4', '7', '6', '60']
];
var itemMenu = {};
var hotSettings = {
data: data,
rowHeaders: false,
colHeaders: false,
//minSpareRows: 1,
autoColumnSize: true,//自适应列宽
observeChanges: true,
//readOnly:true, //是否只读
colWidths: [ 80, 200, 200, 80],//列宽度
cells: function (row, col, prop) {
var cellProperties ={};
//第二列只读
if((row==0&&col==1) || (row==1&&col==1)
|| (row==2&&col==1) || (row==3&&col==1) || (row==4&&col==1)){
cellProperties.readOnly = true;
}
//第四列只读
if((row==0&&col==3) || (row==1&&col==3)
|| (row==2&&col==3) || (row==3&&col==3) || (row==4&&col==3)){
cellProperties.readOnly = true;
}
return cellProperties;
},
mergeCells: true,
mergeCells: [
//{row: 1, col: 1, rowspan: 2, colspan: 1},//这里处理合并的问题
],
contextMenu:{
items: {
"row_below": {
name: '向下插入一行',
disabled: function (key,o) {
return hot.getSelected()[0][1] == 3
}
},
"col_right": {
name: '向右插入一列',
disabled: function (key,o) {
return hot.getSelected()[0][1] == 3
}
},
"mergeCells": {
name: '合并单元格',
disabled: function (key,o) {
return hot.getSelected()[0][1] == 3
}
},
"alignment":{name: '对齐'},
"remove_row": {
name: '删除行',
disabled: function (key,o) {
return hot.getSelected()[0][1] == 3
}
},
"remove_col": {
name: '删除列',
disabled: function (key,o) {
return hot.getSelected()[0][1] == 3
}
},
"hsep1": "---------",
"undo": { name: '撤销' },
},
}
};
var hot = new Handsontable(hotElement, hotSettings);
$("#editTable").click(function(){
var data = hot.getData();
console.log(data)
})
</script>
</body>
</html>
文档地址:handsontable文档地址
文档demo:文档demo