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

收藏

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

需求：
在多行合并的情况下，如何实现自动调整行高？

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

核心代码：

var sheet1 = spread.getSheet(0);
// 设置自动换行
sheet1.getCell(2, 1).wordWrap(true);
//获取合并单元格的行高列宽
var span1 = sheet1.getSpans()[0];
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 · CloudJSTI

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

CloudJSTI · CloudJSTI

ad51bec963c259258daacaf3a4e6fb4.png961026000.png

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

CloudJSTI · CloudJSTI

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

setdatasource无法触发这个方法

Lynn.Dou · Lynn.Dou

CloudJSTI 发表于 2023-6-26 09:29
背景：表格在模板设计器设计好后，其中很多合并的单元格是数据绑定的，也有部分是需要用户自己去填写的，这 ...

调研了下，目前也没有特别好的方案，其实还是延续这篇文章的思路：
可以在setDataSource之后，遍历获取下合并单元格，再按照文章所述做自适应行高。
结合您提供的代码，实际上setDataSource不需要触发这个事件。
setDataSource 是同步的方法，您直接在绑定数据源之后，执行下方代码即可。

image.png527689513.png

		自动登录	找回密码
密码			立即注册

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

4 个回复

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人