找回密码
 立即注册

QQ登录

只需一步,快速开始

Lynn.Dou 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-11-1 12:22  /   查看:3744  /  回复:4
背景:
有小伙伴反馈遇到这样一个问题:
SpreadJS中设置单元格自动换行后,单行自动调整行高没问题。
如果行合并后,再自动调整行高就无效了。

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

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


核心代码:
  1. var sheet1 = spread.getSheet(0);
  2.             // 设置自动换行
  3.             sheet1.getCell(2, 1).wordWrap(true);
  4.             
  5.             //获取合并单元格的行高列宽
  6.             var span1 = sheet1.getSpans()[0];
  7.             var rc = span1.rowCount;
  8.             var c = span1.row;
  9.             var cw1 = 0;
  10.             for(var i=0; i<span1.colCount; i++) {
  11.                 cw1 += sheet1.getColumnWidth(span1.col + i);
  12.             }
  13.             var rh1 = sheet1.getRowHeight(span1.row);
  14.             console.log(cw1);
  15.             console.log(rh1);

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

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

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

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



合并单元格自适应行高.zip

11.64 MB, 下载次数: 565

4 个回复

倒序浏览
CloudJSTI
金牌服务用户   /  发表于:2023-6-26 09:29:05
沙发
背景:表格在模板设计器设计好后,其中很多合并的单元格是数据绑定的,也有部分是需要用户自己去填写的,这种情况下,怎么用一个方法来实现数据更新后,自动调整行高呢
回复 使用道具 举报
CloudJSTI
金牌服务用户   /  发表于:2023-6-26 10:48:27
板凳
ad51bec963c259258daacaf3a4e6fb4.png961026000.png
上面是我写的一个方法,大佬们确定下来方向的话,可以直接把代码发给我
回复 使用道具 举报
CloudJSTI
金牌服务用户   /  发表于:2023-6-26 10:49:06
地板
CloudJSTI 发表于 2023-6-26 10:48
上面是我写的一个方法,大佬们确定下来方向的话,可以直接把代码发给我

setdatasource无法触发这个方法
回复 使用道具 举报
Lynn.Dou讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2023-6-26 18:02:13
5#
CloudJSTI 发表于 2023-6-26 09:29
背景:表格在模板设计器设计好后,其中很多合并的单元格是数据绑定的,也有部分是需要用户自己去填写的,这 ...

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

image.png527689513.png
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部