自定义右键菜单——删除单元格

用过组件版编辑器的朋友应该对删除单元格这个弹框不陌生。


这个是我们针对组件版编辑器封装的弹框，那么想要在不用编辑器的情况下是否可以实现呢？答案是可以的，不然我也不会写这篇文章了！


直接上干货，实现这个功能，我们主要用到：自定义右键菜单、moveTo、clear等接口。自定义右键菜单弹窗就不多说了，这篇文章的demo是由学习指南的demo修改而来，有兴趣可以访问下面的链接。
https://demo.grapecity.com.cn/sp ... xtend-context-menu#

这是我们实现的删除框，这个本质就是插了一片html，各位前端大佬可以根据自己强大的前端代码能力去优化。这个只做演示，确实样式一般。


上面这些选项我用的是raido，在用户点击确定后，根据返回的value判断需要执行哪段逻辑。
我们先从“右侧的那元格左移”开始。首先进入一个if-else的判断
我们先判断需要删除的单元格是否是在该行的最右侧，如果是，则调用clear方法，否则直接moveTo

1. if(sheet.getSelections()[0].col + 1 === sheet.getColumnCount()){
   
2.                             sheet.clear(sheet.getSelections()[0].row, sheet.getSelections()[0].col, 1, 1, 3, 32 /* Axis */ | 64 /* BindingPath */ | 1 /* Data */ | 16 /* Sparkline */ | 2 /* Style */ | 4 /* Comment */);
   
3.                         } else {
   
4.                             sheet.moveTo(sheet.getSelections()[0].row, sheet.getSelections()[0].col + 1, sheet.getSelections()[0].row, sheet.getSelections()[0].col, 1, sheet.getColumnCount() - sheet.getSelections()[0].col - 1, GC.Spread.Sheets.CopyToOptions.all);
   
5.                         }

复制代码

接下来，“下方单元格上移”也是同理，判断删除的单元格是否是在该列的最底部，是则clear，否则moveTo

1. if(sheet.getSelections()[0].row + 1 === sheet.getRowCount()){
   
2.                              sheet.clear(sheet.getSelections()[0].row, sheet.getSelections()[0].col, 1, 1, 3, 32 /* Axis */ | 64 /* BindingPath */ | 1 /* Data */ | 16 /* Sparkline */ | 2 /* Style */ | 4 /* Comment */);
   
3.                          }else {
   
4.                             sheet.moveTo(sheet.getSelections()[0].row + 1, sheet.getSelections()[0].col, sheet.getSelections()[0].row, sheet.getSelections()[0].col, sheet.getRowCount() - sheet.getSelections()[0].row - 1, 1, GC.Spread.Sheets.CopyToOptions.all);
   
5.                          }

复制代码

删除行删除列的逻辑也较为简单，用我们的deleteRows和deleteColumns接口即可。执行完之后，然后通过css将这个弹框display设为none就大功告成~