请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › SpreadJS & GcExcel专区 › 教程集锦 › 查看内容
发新帖

Ellia.Duan SpreadJS 开发认证

超级版主

87

主题

5033

帖子

7944

积分

超级版主

Rank: 8Rank: 8

积分
7944

SpreadJS 认证SpreadJS 高级认证

最新发帖

合并单元格自适应行

Ellia.Duan SpreadJS 开发认证
超级版主   /  发表于：2025-1-26 10:54  /   查看：40  /  回复：0
本帖最后由 Ellia.Duan 于 2025-1-26 11:04 编辑

在SpreadJS中，有一个方法是autoFitRow()可以对当前行自适应行高，但是一些用户发现，如果我这一行存在合并单元格，autoFitRow()不生效。

那么，我们该怎么处理呢？
SpreadJS有一个getAutoFitHeight()方法可以获取当前单元格的内容需要的高度 。
image.png96981505.png
通过上图，发现单元格的值、文本、样式、当前工作表的缩放系数都会影响单元格的实际高度。
比如存在这么一个单元格，如下图所示。合并单元格的区域从B5开始，3行5列。
image.png653584594.png

思路：
1、b5的列宽调整为B:F列的列宽，
2、取消合并单元格，
3、计算此时B5的实际高度，
4、合并单元格
5、计算后的高度减去剩余两行的高度
6、重置b5的列宽

此时计算出来的高度就是当前合并单元格自适应行高的高度。
但是呢，这个还不够。要对当前行自适应高度，要对所有列的单元格按照上面思路计算最大值后，进行比较。
所以我们要对所有列的单元格按照上述步骤计算出来一个行高最大值，最大值即为我们想要的结果。

讲完对合并单元格的思路 ，再重新思考一下这个问题。
sheet中一行的数据，并不都是合并单元格，如果存在非合并单元格，我们可以调用SpreadJS本身自带的autofitRow方法。那么我们怎么兼容上述两种情况呢。
为此，我们创建一个对整行进行自适应行高的方法autoFitMergeCell。在此方法中，对所有可能的情况进行判断。



  2.    spread.suspendPaint()
  3. spread.sheets.forEach(sheet => {
  4.             let oldZoom = sheet.zoom()
  5.             sheet.zoom(1)
  6.             let {row, rowCount} = sheet.getUsedRange(GC.Spread.Sheets.UsedRangeType['data'])
  7.             for (let i = row; i < row + rowCount; i++) {
  8.                 autoFitMergeCell(sheet, i, oldZoom)
  9.             }
  10.             sheet.zoom(oldZoom)
  11.         })
  12.         spread.resumePaint()</div>
  13.    function autoFitMergeCell(sheet, r, oldZoom) {
  14. }
复制代码

如下上代码所示：
1、添加suspendPaint/resumePaint 暂停/恢复绘画来提升性能。
2、遍历sheet  
3、获取当前sheet的缩放系数
4、重置zoom为1
5、遍历每一行
6、调用autoFitMergeCell，传参sheet，row，zoom（影响行高的因素)来对整个工作表进行自适应行高。

这里对zoom进行设置，是为了排除zoom对getAutoFitHeight()方法的影响。
接下来，我们将在autoFitMergeCell方法中，分三种情况进行讨论：
一、不存在合并单元格
如果不存在合并单元格，则直接调用autoFitRow
  1. function autoFitMergeCell(sheet, r, oldZoom) {
  2.   let allSpans = sheet.getSpans()
  3. //判断当前行是否存在合并单元格
  4. let currentRowSpan = allSpans.filter(item => {
  5.                 if (item.row == r) return item
  6.             })
  7.             //1. 不存在合并单元格，直接autoFitRow
  8.             if (!currentRowSpan.length) {
  9.                 sheet.autoFitRow(r);
  10.                 return
  11.             }
  12. }
复制代码

二、rowCount为1
当前行如果存在合并单元格，且所有的合并单元格rowCount为1，也可以调用autoFitRow。

  1. function autoFitMergeCell(sheet, r,oldzoom) {
  2. ...

  4.     //2. 存在合并单元格，但是都是rowCount都是1，此时也可以直接autoFitRow
  5.             let count = currentRowSpan.filter(item => {
  6.                 if (item.rowCount == 1) {
  7.                     return item
  8.                 }
  9.             })
  10.             if (count.length == currentRowSpan.length) {
  11.                 sheet.zoom(oldZoom);
  12.                 sheet.autoFitRow(r);
  13.                 sheet.zoom(1);
  14.                 return
  15.             }
  16. }
复制代码

三、rowCount为n
此种情况，如上文提到的合并单元格自适应行高的思路，
  1. function autoFitMergeCell(sheet, r, oldZoom) {
  2.           ...
  3.             //3.1 存在合并单元格，且rowCount >1 , 计算行高最大值
  4.             let maxHeight = sheet.defaults.rowHeight
  5.             var instance = new GC.Spread.Sheets.CellTypes.Text();
  6.             let map = {}

  8.             for (let i = 0; i < currentRowSpan.length; i++) {
  9.                 let item = currentRowSpan<i>
  10.                 const {row, col, rowCount, colCount} = item
  11.                 //考虑多列的情况，将合并列的列宽放在第一列，计算后再重置
  12.                 let firstColWidth = 0, oldWidth = sheet.getColumnWidth(col);
  13.                 for (let i = col; i < col + colCount; i++) {
  14.                     firstColWidth += sheet.getColumnWidth(i);
  15.                     map<i> = true
  16.                 }
  17.                 sheet.setColumnWidth(col, firstColWidth)
  18.                 sheet.removeSpan(item.row, item.col);
  19.                 var returnValue = instance.getAutoFitHeight(
  20.                     sheet.getValue(row, col),
  21.                     sheet.getText(row, col),
  22.                     sheet.getActualStyle(row, col),
  23.                     sheet.zoom(),
  24.                     {
  25.                         "sheet": sheet,
  26.                         "row": row,
  27.                         "col": col,
  28.                         "sheetArea": GC.Spread.Sheets.SheetArea.viewport
  29.                     });
  30.                 sheet.addSpan(item.row, item.col, item.rowCount, item.colCount);
  31.                 for (let i = row + 1; i < row + rowCount; i++) {
  32.                     returnValue -= sheet.getRowHeight(i)
  33.                 }
  34.                 sheet.setColumnWidth(col, oldWidth)

  36.                 if (returnValue > maxHeight) {
  37.                     maxHeight = returnValue
  38.                 }
  39.             }
  40.             //3.2 此行存在合并单元格，也存在不合并单元格，计算不合并单元格的行高最大值
  41.             for (let i = 0; i < sheet.getColumnCount(); i++) {
  42.                 if (!map<i> && sheet.getValue(r, i)) {
  43.                     let row = r, col = i;
  44.                     var oldSpan = sheet.getSpan(row,col);
  45.                     if(oldSpan){
  46.                         sheet.removeSpan(row,col);
  47.                     }
  48.                     var returnValue = instance.getAutoFitHeight(
  49.                         sheet.getValue(row, col),
  50.                         sheet.getText(row, col),
  51.                         sheet.getActualStyle(row, col),
  52.                         sheet.zoom(),
  53.                         {
  54.                             "sheet": sheet,
  55.                             "row": row,
  56.                             "col": col,
  57.                             "sheetArea": GC.Spread.Sheets.SheetArea.viewport
  58.                         });
  59.                     if(oldSpan){
  60.                         sheet.addSpan(oldSpan.row,oldSpan.col,oldSpan.rowCount,oldSpan.colCount)
  61.                     }
  62.                     if (returnValue > maxHeight) {
  63.                         maxHeight = returnValue
  64.                     }
  65.                 }
  66.             }
  67.             sheet.setRowHeight(r, maxHeight)
  68.         }
复制代码




完整代码请参考附件：
合并单元格自适应_designer.html (7.57 KB, 下载次数: 0)

0 个回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2025 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部