找回密码
 立即注册

QQ登录

只需一步,快速开始

右手微笑
金牌服务用户   /  发表于:2023-8-4 18:27  /   查看:1880  /  回复:18
本帖最后由 Joestar.Xu 于 2023-8-8 10:07 编辑

如图所示:

1691144395659.jpg463246459.png
插入一张浮动图片,放在B列中间,选中A列,向右插入10列,在撤销之后,图片尺寸变大,图片设置pic.dynamicMove(true); pic.dynamicSize(false);
插入列的command为自定义command,代码如下:


// 右侧插入列事件注册
  public setPushCol(callBack) {
    this.spread.commandManager().register("pushMutiColsCommand", {
      canUndo: true,
      execute: (context, options, isUndo) => {
        const sheet = context.getSheetFromName(options.sheetName);
        let Commands = GC.Spread.Sheets.Commands;
        if (isUndo) {
          // fix框架bug: 插入列后反复撤销重做会导致图表宽度变化
          const charts = sheet.charts.all();
          const width = [];
          charts.forEach((item) => {
            width.push(item?.width());
          })
          Commands.undoTransaction(context, options);
          charts.forEach((item, index) => {
            item?.width(width[index]);
          })
          sheet.suspendPaint();
          sheet.suspendEvent();
          resetFrozenRange.call(this,false,'col','right',options.selections[0].col+options.selections[0].colCount -1,parseInt(options.addNum));
          callBack && callBack();
          sheet.resumePaint();
          sheet.resumeEvent();
          return true;
        } else {
          Commands.startTransaction(context, options);
          sheet.suspendPaint();
          sheet.suspendEvent();  //todo:使用后不会触发行列change事件回调,影响协同        
          try {
            if (parseInt(options.addNum)) {
              const col = options.selections[0].col < 0 ? 0 : options.selections[0].col;
              const lastCol = (options.selections[0].col + options.selections[0].colCount - 1) > sheet.getColumnCount(GC.Spread.Sheets.SheetArea.viewport) ? sheet.getColumnCount(GC.Spread.Sheets.SheetArea.viewport) : options.selections[0].col + options.selections[0].colCount - 1;
              const columnWidth = sheet.getColumnWidth(lastCol);
              let colCount = options.selections[0].colCount;
              // 记录选中列的style
              const styleList = [];
              for (let i = 0; i < sheet.getRowCount(); i++) {
                let style = sheet.getActualStyle(i, lastCol, GC.Spread.Sheets.SheetArea.viewport, true);
                style.backgroundImage = null;
                styleList.push(style);
              }
              insertColChart(sheet, col + 1);
              resetFrozenRange.call(this,true,'col','right',col + colCount-1,parseInt(options.addNum));
              sheet.resumePaint();
              sheet.resumeEvent();
              sheet.addColumns(col + colCount, parseInt(options.addNum));
              sheet.suspendPaint();
              sheet.suspendEvent();//todo:使用后不会触发行列change事件回调,影响协同
              for (let i = 0; i < options.addNum; i++) {
                // 设置插入列的列宽
                sheet.setColumnWidth(col + colCount + i, columnWidth);
                // 设置插入的列为选中列的样式,自号、颜色等、加粗等
                for (let j = 0; j < sheet.getRowCount(); j++) {
                  sheet.setStyle(j, col + colCount + i, styleList[j]);
                }
              }
              sheet.setSelection(-1, col + colCount, sheet.getRowCount(), parseInt(options.addNum));
              callBack && callBack();
              resetCharts(sheet);
            }
          } catch (e) {
            console.log(e);
          }
          sheet.resumePaint();
          sheet.resumeEvent();
          Commands.endTransaction(context, options);
          this.spread.focus(true);
          return true;
        }
      }
    });
  }

18 个回复

倒序浏览
Joestar.XuSpreadJS 开发认证
超级版主   /  发表于:2023-8-7 10:20:24
沙发
您好,您提供的代码里面缺少callBack参数,请您提供一个完整的可以运行的Demo,我们这边帮您调研一下。
回复 使用道具 举报
右手微笑
金牌服务用户   /  发表于:2023-8-7 10:49:31
板凳
本帖最后由 右手微笑 于 2023-8-7 11:11 编辑
Joestar.Xu 发表于 2023-8-7 10:20
您好,您提供的代码里面缺少callBack参数,请您提供一个完整的可以运行的Demo,我们这边帮您调研一下。

我把代码简化了一下,

this.spread.commandManager().register("pushMutiColsCommand", {
      canUndo: true,
      execute: (context, options, isUndo) => {
        const sheet = context.getSheetFromName(options.sheetName);
        let Commands = GC.Spread.Sheets.Commands;
        if (isUndo) {
          Commands.undoTransaction(context, options);
          return true;
        } else {
          Commands.startTransaction(context, options);
          sheet.suspendPaint();
          sheet.suspendEvent();  //todo:使用后不会触发行列change事件回调,影响协同        
          try {
            if (parseInt(options.addNum)) {
              const col = options.selections[0].col < 0 ? 0 : options.selections[0].col;
              const lastCol = (options.selections[0].col + options.selections[0].colCount - 1) > sheet.getColumnCount(GC.Spread.Sheets.SheetArea.viewport) ? sheet.getColumnCount(GC.Spread.Sheets.SheetArea.viewport) : options.selections[0].col + options.selections[0].colCount - 1;
              let colCount = options.selections[0].colCount;
              sheet.addColumns(col + colCount, parseInt(options.addNum));
            }
          } catch (e) {
            console.log(e);
          }
          sheet.resumePaint();
          sheet.resumeEvent();
          Commands.endTransaction(context, options);
          this.spread.focus(true);
          return true;
        }
      }
    });

调用:

this.spread.commandManager().execute({
                cmd: "pushMutiColsCommand",
                selections: this.sheet.getSelections(),
                sheetName: this.sheet.name(),
                addNum: 10
              })

addNum可以大一些,我一般都是写10列,必现
回复 使用道具 举报
Joestar.XuSpreadJS 开发认证
超级版主   /  发表于:2023-8-7 15:14:15
地板
您好,我这边试了一下,在没有将dynamicSize置为false的时候会出现您说的情况。

但是当我将dynamicSize置为false的时候,就能够正常显示了。

1.gif921206054.png
回复 使用道具 举报
右手微笑
金牌服务用户   /  发表于:2023-8-7 15:42:04
5#
Joestar.Xu 发表于 2023-8-7 15:14
您好,我这边试了一下,在没有将dynamicSize置为false的时候会出现您说的情况。

但是当我将dynamicSize ...

image.png815976257.png
上边是我这边的图片的配置,您最好多插入几列,让图片超出显示区域,然后再撤回,会出现问题,我这边插入10列,图片就超出显示区域了,插入2、3列都不会有问题
回复 使用道具 举报
Joestar.XuSpreadJS 开发认证
超级版主   /  发表于:2023-8-7 17:32:34
6#
您好,这边问题已经复现了,问题的关键点在于图片超出了sheet的区域。

但是我不太明白您为什么要在图片前添加列,是为了让图片不超出sheet区域吗?
回复 使用道具 举报
右手微笑
金牌服务用户   /  发表于:2023-8-7 17:47:41
7#
Joestar.Xu 发表于 2023-8-7 17:32
您好,这边问题已经复现了,问题的关键点在于图片超出了sheet的区域。

但是我不太明白您为什么要在图片 ...

这是我们这边一个用户的操作,做这个操作只是为了插入列,并不是想在图片之前插入,只不过恰巧后边这列上有一张图片,然后撤销操作之后,就出现了这个问题,目前有解决办法吗
回复 使用道具 举报
Joestar.XuSpreadJS 开发认证
超级版主   /  发表于:2023-8-7 18:08:25
8#
关于解决方案这边需要调研一下,后续有进展我会在本贴中回复您。

本帖先做保留处理了。
回复 使用道具 举报
Joestar.XuSpreadJS 开发认证
超级版主   /  发表于:2023-8-16 09:49:39
9#
您好,这个问题出现的根本原因是因为用户粘贴的图片超出了sheet的可视区域,这时我们会让其保持原始尺寸,此时执行增加列的操作,再撤销,SpreadJS会将超出可视区域的图片调整其大小以适应视口区域,进而导致了这个图片显示不正确的问题。

为了解决这个问题,建议您为SpreadJS设置足够多的列数和行数。
回复 使用道具 举报
右手微笑
金牌服务用户   /  发表于:2023-8-16 15:33:03
10#
本帖最后由 右手微笑 于 2023-8-16 15:36 编辑
Joestar.Xu 发表于 2023-8-16 09:49
您好,这个问题出现的根本原因是因为用户粘贴的图片超出了sheet的可视区域,这时我们会让其保持原始尺寸, ...

1、表格的行列数一开始是固定的200行*20列,但是随着用户的操作,就没准是多少行列了,这个不受控制
2、表格可视区域根据设备的不同,大小也是不同的
3、用户的操作,图片只是超出了可视区域,并没有超出总的行列数,因此设置足够的行列数并不会解决这个问题
希望还是从根本上解决
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部