实现和Excel一致的自适应行高方案

收藏

本帖最后由 Joestar.Xu 于 2023-11-1 15:40 编辑

有很多小伙伴在使用SpreadJS的时候都会使用自动换行的功能，但是这个功能在实现上与Excel有细微的差别，本帖旨在帮助大家快速实现和Excel一致的自适应行高的方案。

先来看一下实现的效果：

2.gif604670714.png

要实现这样的效果，需要监听RowHeightChanged、CellChanged和Designer.setFontSize这三个事件，分别在这三个事件中做相应的事件逻辑，因为代码比较简单，大家可以直接下载附件中的Demo查看源码。

核心代码如下：

  let flag = false;
  let autoFitRows = new Set();
  let autoFitChangedRows = new Set();

  sheet.bind(GC.Spread.Sheets.Events.RowHeightChanged, function (e, info) {
let row = info.rowList[0];
if (autoFitRows.has(row) && !flag) {
   autoFitChangedRows.add(row);
}
  });

  // 修改内容自适应行高
  sheet.bind(GC.Spread.Sheets.Events.CellChanged, function (e, info) {
let row = info.row;
let col = info.col;
if (!autoFitChangedRows.has(row)) {
   let isWrap = sheet.getCell(row, col).wordWrap();
   if (isWrap) {
      flag = true;
      sheet.autoFitRow(row);
      autoFitRows.add(row);
      flag = false;
   }
}
  });

  // 修改字号自适应行高
  spread.commandManager().addListener("anyscLicenser", function () {
for (const element of arguments) {
   let cmd = element.command;
   if (cmd.cmd == "Designer.setFontSize") {
      console.log("Designer.setFontSize");
      let row = cmd.activeRowIndex;
      let col = cmd.activeColIndex;
      if (!autoFitChangedRows.has(row)) {
      let isWrap = sheet.getCell(row, col).wordWrap();
      if (isWrap) {
         flag = true;
         sheet.autoFitRow(row);
         autoFitRows.add(row);
         flag = false;
      }
      }
   }
}
  });

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

实现和Excel一致的自适应行高方案

0 个回复

SpreadJS 认证

SpreadJS 高级认证