自定义右键菜单——删除单元格
本帖最后由 Derrick.Jiao 于 2021-11-17 13:47 编辑用过组件版编辑器的朋友应该对删除单元格这个弹框不陌生。
这个是我们针对组件版编辑器封装的弹框，那么想要在不用编辑器的情况下是否可以实现呢？答案是可以的，不然我也不会写这篇文章了！
直接上干货，实现这个功能，我们主要用到：自定义右键菜单、moveTo、clear等接口。自定义右键菜单弹窗就不多说了，这篇文章的demo是由学习指南的demo修改而来，有兴趣可以访问下面的链接。
https://demo.grapecity.com.cn/sp ... xtend-context-menu#
这是我们实现的删除框，这个本质就是插了一片html，各位前端大佬可以根据自己强大的前端代码能力去优化。这个只做演示，确实样式一般。
上面这些选项我用的是raido，在用户点击确定后，根据返回的value判断需要执行哪段逻辑。
我们先从“右侧的那元格左移”开始。首先进入一个if-else的判断
我们先判断需要删除的单元格是否是在该行的最右侧，如果是，则调用clear方法，否则直接moveTo
if(sheet.getSelections().col + 1 === sheet.getColumnCount()){
sheet.clear(sheet.getSelections().row, sheet.getSelections().col, 1, 1, 3, 32 /* Axis */ | 64 /* BindingPath */ | 1 /* Data */ | 16 /* Sparkline */ | 2 /* Style */ | 4 /* Comment */);
} else {
sheet.moveTo(sheet.getSelections().row, sheet.getSelections().col + 1, sheet.getSelections().row, sheet.getSelections().col, 1, sheet.getColumnCount() - sheet.getSelections().col - 1, GC.Spread.Sheets.CopyToOptions.all);
}
接下来，“下方单元格上移”也是同理，判断删除的单元格是否是在该列的最底部，是则clear，否则moveTo if(sheet.getSelections().row + 1 === sheet.getRowCount()){
sheet.clear(sheet.getSelections().row, sheet.getSelections().col, 1, 1, 3, 32 /* Axis */ | 64 /* BindingPath */ | 1 /* Data */ | 16 /* Sparkline */ | 2 /* Style */ | 4 /* Comment */);
}else {
sheet.moveTo(sheet.getSelections().row + 1, sheet.getSelections().col, sheet.getSelections().row, sheet.getSelections().col, sheet.getRowCount() - sheet.getSelections().row - 1, 1, GC.Spread.Sheets.CopyToOptions.all);
}
删除行删除列的逻辑也较为简单，用我们的deleteRows和deleteColumns接口即可。执行完之后，然后通过css将这个弹框display设为none就大功告成~
页:
[1]