handsontable.js是一個類似excel表格編輯器的插件，但是在handsontable下行高是固定行，無法與數據隨動，比如在將第二行高度改變，並且在第二行之前插入一行，那麼數據會到第三行而改變高度的還是第二行，導致行高和數據不隨動。
以下是我的解決方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>handsontable</title>
<link rel="stylesheet" href="node_modules/handsontable/dist/handsontable.css" />
</head>
<body>
<div id="example"></div>
<script src="node_modules/handsontable/dist/handsontable.js"></script>
<script>
var data = [
["1", "2", "3", "4", "5"],
["2017", 10, 11, 12, 13],
["2018", 20, 11, 14, 13],
["2019", 30, 15, 12, 13],
["2020", 30, 15, 12, 13],
["2021", 30, 15, 12, 13],
["2022", 30, 15, 12, 13]
];
var container = document.getElementById('example');
var hot = new Handsontable(container, {
data: data,
rowHeaders: true,
colHeaders: true,
contextMenu : true,
manualRowResize : true,
manualColumnResize : true,
manualColumnMove : true,
manualRowMove : true,
manualColumnFreeze : true,
copyPaste : true,
wordWrap : true,
afterCreateRow : onAfterCreateRow ,
afterRemoveRow : onAfterRemoveRow,
afterCreateCol : onAfterCreateCol,
afterRemoveCol : onAfterRemoveCol,
beforeRowMove : onBeforeRowMove,
afterRowMove : onAfterRowMove,
beforeColMove : onBeforeColMove,
afterColMove : onAfterColMove
});
function onAfterCreateRow(index,amount,source){
var that = this;
var rowAr = [];
for(var i = 0; i < that.countRows(); i++){
rowAr.push(that.getRowHeight(i) || 23);
}
rowAr[index] = rowAr.splice(index+1, 1, rowAr[index])[0];
var $moveArr = that.getPlugin("ManualRowMove").rowsMapper.__arrayMap;
for(var i = 0; i < $moveArr.length; i++){
if($moveArr[i] >= index){
$moveArr[i] += 1;
}
}
$moveArr.splice(index,0,index);
var r = that.getPlugin('ManualRowResize');
for(var j = 0; j < rowAr.length; j++){
r.setManualSize(j,rowAr[j]);
}
that.updateSettings({rowHeights:rowAr});
}
function onBeforeRowMove(rows,target){
var that = this;
var rowAr = [];
for(var i = 0; i < that.countRows(); i++){
rowAr.push(that.getRowHeight(i) || 23);
}
if(rows > target){
rowAr[rows] = rowAr.splice(target, 1, rowAr[rows])[0];
}else{
rowAr[rows] = rowAr.splice(target-1, 1, rowAr[rows])[0];
}
var r = that.getPlugin('ManualRowResize');
for(var j = 0; j < rowAr.length; j++){
r.setManualSize(j,rowAr[j]);
}
that.updateSettings({rowHeights:rowAr});
}
function onAfterRowMove(rows,target){
var that = this;
var rowAr = [];
rowAr = that.getSettings().rowHeights.concat();
var r = that.getPlugin('ManualRowResize');
for(var j = 0; j < rowAr.length; j++){
r.setManualSize(j,rowAr[j]);
}
tableRender(that);
}
function onAfterRemoveRow(index,amount,source){
var that = this;
var rowAr = [];
for(var i = 0; i < that.countRows(); i++){
rowAr.push(that.getRowHeight(i) || 23);
}
var r = that.getPlugin('ManualRowResize');
rowAr.splice(index,1);
var $moveArr = that.getPlugin("ManualRowMove").rowsMapper.__arrayMap;
for(var i = 0; i < $moveArr.length; i++){
if($moveArr[i] > $moveArr[index]){
$moveArr[i] -= 1;
}
}
$moveArr.splice(index,1);
for(var i = 0;i < rowAr.length; i++){
r.setManualSize(i,rowAr[i]);
}
that.updateSettings({rowHeights:rowAr});
}
function onAfterCreateCol(index,amount,source){
var that = this;
var colAr = [];
for(var i = 0; i < that.countCols(); i++){
colAr.push(that.getColWidth(i) || 50);
}
colAr[index] = colAr.splice(index+1, 1, colAr[index])[0];
var $moveArr = that.getPlugin("ManualColumnMove").columnsMapper.__arrayMap;
for(var i = 0; i < $moveArr.length; i++){
if($moveArr[i] >= index){
$moveArr[i] += 1;
}
}
$moveArr.splice(index,0,index);
var r = that.getPlugin('ManualColumnResize');
for(var j = 0; j < colAr.length; j++){
r.setManualSize(j,colAr[j]);
}
that.updateSettings({colWidths:colAr});
}
function onBeforeColMove(cols,target){
var that = this;
var colAr = [];
for(var i = 0; i < that.countCols(); i++){
colAr.push(that.getColWidth(i) || 50);
}
if(cols > target){
colAr[cols] = colAr.splice(target, 1, colAr[cols])[0];
}else{
colAr[cols] = colAr.splice(target-1, 1, colAr[cols])[0];
}
var r = that.getPlugin('ManualColumnResize');
for(var j = 0; j < colAr.length; j++){
r.setManualSize(j,colAr[j]);
}
that.updateSettings({colWidths:colAr});
}
function onAfterColMove(cols,target){
var that = this;
var colAr = [];
var $move = that.getPlugin("ManualColumnMove");
colAr = that.getSettings().rowHeights.concat();
var r = that.getPlugin('ManualColumnResize');
for(var j = 0; j < colAr.length; j++){
r.setManualSize(j,colAr[j]);
}
tableRender(that);
}
function onAfterRemoveCol(index,amount){
var that = this;
var colAr = [];
for(var i = 0;i <= that.countCols(); i++){
colAr.push(that.getColWidth(i) || 50);
}
colAr.splice(index,1);
var $moveArr = that.getPlugin("ManualColumnMove").columnsMapper.__arrayMap;
for(var i = 0; i < $moveArr.length; i++){
if($moveArr[i] > $moveArr[index]){
$moveArr[i] -= 1;
}
}
$moveArr.splice(index,1);
var r = that.getPlugin('ManualColumnResize');
for(var j = 0; j < colAr.length; j++){
r.setManualSize(j,colAr[j]);
}
that.updateSettings({colWidths:colAr});
}
function tableRender(hot){
var that = hot;
that.forceFullRender = true;
that.view.render();
that.view.wt.wtOverlays.adjustElementsSize(true);
}
</script>
</body>
</html>
在這裏以行高爲例，最主要的是 var $moveArr = that.getPlugin("ManualRowMove").rowsMapper.__arrayMap; 這句用於獲取移動的行數組，否則渲染數據時位置會錯亂。
在執行updateSettings的時候，表格也會重新渲染。但是updateSettings無法改變使用鼠標拖動變化的行高和列寬，所以這裏要用setManualSize來強制改變行高和列寬。
如果有哪位大佬看到這篇文章並且有更好的解決方法，請務必告訴我，萬分感謝！