handsontable行高和列宽随动

最新推荐文章于 2024-08-23 08:28:37 发布

切图工

最新推荐文章于 2024-08-23 08:28:37 发布

阅读量7.8k

点赞数 1

分类专栏： js模块文章标签： handsontable 改变行高 excel表格随动

本文链接：https://blog.csdn.net/xmy120/article/details/80580829

版权

js模块专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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来强制改变行高和列宽。

如果有哪位大佬看到这篇文章并且有更好的解决方法，请务必告诉我，万分感谢！