如何实现类Excel的隐藏效果

大家在使用SpreadJS的隐藏功能的时候会发现SpreadJS的隐藏效果和Excel的隐藏效果是不一样的，如下图所示：


SpreadJS：


Excel：


那么如果想要在SpreadJS中实现类似Excel的隐藏效果应该如何实现呢？

在SpreadJS中，隐藏行并不是将它的行高设置为0，而是从视图上直接隐藏了这一行，但是Excel中则是将它的行高设置为了0，所以要实现这个需求的核心在于如何重写隐藏行的命令使其能够将行高设置为0。

以下是一个简单的示例，供大家参考：

1. window.onload = function () {
   
2.   let designerConfig = JSON.parse(
   
3.     JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig)
   
4.   );
   
5. 
   
6.   let designer = new GC.Spread.Sheets.Designer.Designer(
   
7.     "gc-designer-container",
   
8.     designerConfig
   
9.   );
   
10. 
    
11.   let spread = designer.getWorkbook();
    
12. 
    
13.   let sheet = spread.getActiveSheet();
    
14. 
    
15.   let hideRow = {
    
16.     canUndo: true,
    
17.     name: "hideRow",
    
18.     execute: function (context, options, isUndo) {
    
19.       var Commands = GC.Spread.Sheets.Commands;
    
20.       if (isUndo) {
    
21.         Commands.undoTransaction(context, options);
    
22.         return true;
    
23.       } else {
    
24.         Commands.startTransaction(context, options);
    
25.         let sheet = context.getSheetFromName(options.sheetName);
    
26.         sheet.suspendPaint();
    
27.         let selections = options.selections;
    
28.         for (let i = 0; i < selections.length; i++) {
    
29.           let selection = selections[i];
    
30.           for (let j = 0; j < selection.rowCount; j++) {
    
31.             sheet.setRowHeight(selection.row + j, 0);
    
32.           }
    
33.         }
    
34.         sheet.resumePaint();
    
35.         Commands.endTransaction(context, options);
    
36.         return true;
    
37.       }
    
38.     },
    
39.   };
    
40. 
    
41.   spread.commandManager().register("hideRow", hideRow);
    
42. 
    
43.   let oldOpenMenu = spread.contextMenu.onOpenMenu;
    
44.   spread.contextMenu.onOpenMenu = function (
    
45.     menuData,
    
46.     itemsDataForShown,
    
47.     hitInfo,
    
48.     spread
    
49.   ) {
    
50.     oldOpenMenu.apply(this, arguments);
    
51. 
    
52.     itemsDataForShown.forEach(function (item, index) {
    
53.       if (item && item.name === "gc.spread.contextMenu.hideRows") {
    
54.         item.command = "hideRow";
    
55.       }
    
56.     });
    
57.   };
    
58. };

复制代码