Lynn.Dou 发表于 2021-11-1 12:22:35

多行合并单元格时如何自适应行高

背景:
有小伙伴反馈遇到这样一个问题:
SpreadJS中设置单元格自动换行后,单行自动调整行高没问题。
如果行合并后,再自动调整行高就无效了。

需求:
在多行合并的情况下,如何实现自动调整行高?

思路:
多行合并情况下,自适应行高时不知道要修改哪一行的行高,
所以此问题属于产品设计,这也是与Excel保持一致的。
可以通过新建一个sheet,获取此合并单元格的value和列宽,间接获取合并单元格的自适应高度。
然后根据需要调整某一行行高或者均匀分配各行调整等等,
最终实现需求。


核心代码:
var sheet1 = spread.getSheet(0);
            // 设置自动换行
            sheet1.getCell(2, 1).wordWrap(true);
            
            //获取合并单元格的行高列宽
            var span1 = sheet1.getSpans();
            var rc = span1.rowCount;
            var c = span1.row;
            var cw1 = 0;
            for(var i=0; i<span1.colCount; i++) {
                cw1 += sheet1.getColumnWidth(span1.col + i);
            }
            var rh1 = sheet1.getRowHeight(span1.row);
            console.log(cw1);
            console.log(rh1);

            var value1 = sheet1.getValue(span1.row, span1.col);
            var style = sheet1.getStyle(span1.row, span1.col);

            //新建sheet,设置B2单元格(1,1)的列宽为1中获取的合并单元格的列宽(cw)
            spread.addSheet(1, new GC.Spread.Sheets.Worksheet('NewSheet'));
            var sheet2 = spread.getSheet(1);
            sheet2.setValue(1,1,value1);
            sheet2.setStyle(1,1,style);
            sheet2.setColumnWidth(1, cw1);

            //设置该单元格 自适应高度,获取该高度
            sheet2.getCell(1,1).wordWrap(true);
            sheet2.autoFitRow(1);
            var autoFitRh = sheet2.getRowHeight(1);
            console.log(autoFitRh);

            for(var i=0; i<rc; i++) {
                sheet1.setRowHeight(c+i, autoFitRh/rc);
            }完整代码请查看附件。



CloudJSTI 发表于 2023-6-26 09:29:05

背景:表格在模板设计器设计好后,其中很多合并的单元格是数据绑定的,也有部分是需要用户自己去填写的,这种情况下,怎么用一个方法来实现数据更新后,自动调整行高呢

CloudJSTI 发表于 2023-6-26 10:48:27


上面是我写的一个方法,大佬们确定下来方向的话,可以直接把代码发给我

CloudJSTI 发表于 2023-6-26 10:49:06

CloudJSTI 发表于 2023-6-26 10:48
上面是我写的一个方法,大佬们确定下来方向的话,可以直接把代码发给我

setdatasource无法触发这个方法

Lynn.Dou 发表于 2023-6-26 18:02:13

CloudJSTI 发表于 2023-6-26 09:29
背景:表格在模板设计器设计好后,其中很多合并的单元格是数据绑定的,也有部分是需要用户自己去填写的,这 ...
调研了下,目前也没有特别好的方案,其实还是延续这篇文章的思路:
可以在setDataSource之后,遍历获取下合并单元格,再按照文章所述做自适应行高。
结合您提供的代码,实际上setDataSource不需要触发这个事件。
setDataSource 是同步的方法,您直接在绑定数据源之后,执行下方代码即可。


页: [1]
查看完整版本: 多行合并单元格时如何自适应行高