handsontable行高和列宽随动
handsontable.js是一个类似excel表格编辑器的插件，但是在handsontable下行高是固定行，无法与数据随动，比如在将第二行高度改变，并且在第二行之前插入一行，那么数据会到第三行而改变高度的还是第二行，导致行高和数据不随动。
以下是我的解决方法：
<html>
<head>
<meta charset="UTF-8">
<title>handsontabletitle>
<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来强制改变行高和列宽。
如果有哪位大佬看到这篇文章并且有更好的解决方法，请务必告诉我，万分感谢！