dexteryao 发表于 2021-12-29 15:28:37

SpreadJS 实现拖拽插入

在SpreadJS中，可以通过shift+拖动整列的方式来移动列，这个方式和Excel是保持一致的。
但是按住shift的操作并不是所有用户都了解，那如何将按shift移动的方式改为直接拖拽移动的方式呢？

在SpreadJS中用户的UI行为都是响应浏览器事件后调用spreadjs内置的command。
拖拽调用的是GC.Spread.Sheets.Commands.dragDrop命令

当我们需要改变行为的时候只需要重写命令的行为即可
var oldDragDropExcecte = GC.Spread.Sheets.Commands.dragDrop.execute;
GC.Spread.Sheets.Commands.dragDrop.execute = function (context, option, isUndo) {
    if (option.fromRow === -1 || option.fromColumn === -1) {
      option.insert = true;
    }
    oldDragDropExcecte.call(this, context, option, isUndo);
}在上面代码中，首先判断fromRow或者fromColumn为-1，代表整列或者整行的操作。
将insert直接设置为true，改变一切拖动覆盖的行为。


在线体验地址https://jscodemine.grapecity.com/share/k-qC9p270UytRu6-6503qg/






Lynn.Dou 发表于 2022-10-9 18:11:20

可以在excute方法里对spread进行判断，决定是否执行后续代码

我叫白小飞 发表于 2022-10-9 16:26:06

这个好像是对全局所有spread生效，能否单独对某个spread进行如此设置呢？

我叫白小飞 发表于 2022-10-28 14:45:30

求助！！使用setArrayFormula批量设置公式后，拖拽GC.Spread.Sheets.Commands.dragDrop命令执行的逻辑就不生效了。
批量设置公式如下：
const allRows = sheet.getRowCount()
sheet.setArrayFormula(0, 7, allRows, 1, `=F1:F${allRows}+G1:G${allRows}`)

Lynn.Dou 发表于 2022-10-28 18:36:23

我叫白小飞 发表于 2022-10-28 14:45
求助！！使用setArrayFormula批量设置公式后，拖拽GC.Spread.Sheets.Commands.dragDrop命令执行的逻辑就不 ...
您好，
在教程链接demo的基础上，结合您提供的代码做了测试，未复现您描述的问题，即可以实现拖拽插入。
https://jscodemine.grapecity.com/share/k-qC9p270UytRu6-6503qg/
如下图，您可以实际操作测试下。


如果问题仍未解决，您可以另开新帖并附上可复现的demo，这边再结合代码调研下原因。

我叫白小飞 发表于 2022-10-31 10:09:14

Lynn.Dou 发表于 2022-10-28 18:36
您好，
在教程链接demo的基础上，结合您提供的代码做了测试，未复现您描述的问题，即可以实现拖拽插入。 ...

行拖拽移动失效了。你这代码没问题，加了公式后，行拖拽就有问题。你看看。

Lynn.Dou 发表于 2022-10-31 16:48:11

我叫白小飞 发表于 2022-10-31 10:09
行拖拽移动失效了。你这代码没问题，加了公式后，行拖拽就有问题。你看看。

对于数组公式行拖拽插入的行为是不允许的，这一点也是与Excel一致的，如下图:

SJS提供了InvalidOperation事件，可以通过此事件来对此无效行为做出监听，并给出相应提示。
示例代码如下：
sheet.suspendPaint();
const allRows = sheet.getRowCount()
sheet.setArrayFormula(0, 7, allRows, 1, `=F1:F${allRows}+G1:G${allRows}`)
sheet.resumePaint();

sheet.bind(GC.Spread.Sheets.Events.InvalidOperation, function (e, info) {
      console.log(info);
});

我叫白小飞 发表于 2022-12-7 21:44:41

开启表单保护后，该拖拽方式就失效了，但是按住shift拖拽是可以的
sheet.options.isProtected = true
    sheet.options.protectionOptions = {
      allowSelectLockedCells: true,
      allowSelectUnlockedCells: true,
      allowDragInsertRows: true
    }

Lynn.Dou 发表于 2022-12-8 18:38:42

表单保护需要对拖拽插入行的按键行为做判断，SpreadJS未暴露相关接口不能直接修改。
对于表单保护的场景，不建议您使用本贴方案，您可以使用ctrl+shift完成拖拽。

王小白 发表于 2023-11-20 19:34:09

这么改，UI上看还是覆盖啊，并不是移动插入的UI，如截图，是按住shift时的UI

页: [1] 2
查看完整版本: SpreadJS 实现拖拽插入