SpreadJS在线表格编辑器自定义菜单栏 -- 格式刷

用过Excel的小伙伴应该对格式刷不陌生，格式刷可以给我们使用模板的时候带来便利，可以快速地为指定区域添加想要的格式。那么本期教程就教大家如何在组件化编辑器中实现格式刷的功能。

这边需要用到的东西有组件版编辑器、jQuery(为了方便实现，这边就用jQuery，不想用jQuery的小伙伴可以把jQuery里要用的方法用js封装一下就行)、SelectionChanged事件以及js的mousemove事件。

首先是在ribbon中添加我们的格式刷命令，也就是在我们的config.js中添加


接着就是在我们commandMap注册这个命令

1.     brush: {
   
2.                 title: "格式刷",
   
3.                 iconClass: "ribbon-button-brush",
   
4.                 commandName: "brush",
   
5.                 execute: async (context, propertyName, fontItalicChecked) => {
   
6.                         var sheet = spread.getActiveSheet();
   
7.                         var selectionRange = sheet.getSelections();
   
8.                                 if (selectionRange.length > 1) {
   
9.                                           alert("无法对多重选择区域执行此操作");
   
10.                                            return;
    
11.                                }
    
12. 
    
13.                                if (isFormatPainting) {
    
14.                                           resetFormatPainting(sheet);
    
15.                                           return;
    
16.                                }
    
17. 
    
18.                               fromRange = selectionRange[0];
    
19.                               fromSheet = sheet;
    
20.                               isFormatPainting = true;
    
21.                            }
    
22. }

复制代码

定义几个flag用于格式刷的标记

1. var fromRange, fromSheet, isFormatPainting = false;
   
2. 
   
3.                         function resetFormatPainting(sheet) {
   
4.                     isFormatPainting = false;
   
5.                 }

复制代码

通过SelectionChanged格式刷添加选区的操作，也就是复制格式的操作，里面调用了clipboardPaste命令

1. spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function(e, info) {
   
2.                                 if (isFormatPainting) {
   
3.                                         var sheet = spread.getActiveSheet();
   
4.                                         resetFormatPainting(sheet);
   
5.                                         sheet.isPaintSuspended(true);
   
6.                                         var toRange = sheet.getSelections()[0];
   
7. 
   
8. 
   
9.                                         //toRange biger than fromRange
   
10.                                         if (fromRange.rowCount > toRange.rowCount) {
    
11.                                                 toRange.rowCount = fromRange.rowCount;
    
12.                                         }
    
13.                                         if (fromRange.colCount > toRange.colCount) {
    
14.                                                 toRange.colCount = fromRange.colCount;
    
15.                                         }
    
16.                                         //toRange must in Sheet
    
17.                                         if (toRange.row + toRange.rowCount > sheet.getRowCount()) {
    
18.                                                 toRange.rowCount = sheet.getRowCount() - toRange.row;
    
19.                                         }
    
20.                                         if (toRange.col + toRange.colCount > sheet.getColumnCount()) {
    
21.                                                 toRange.colCount = sheet.getColumnCount() - toRange.col;
    
22.                                         }
    
23. 
    
24.                                         var rowStep = fromRange.rowCount,
    
25.                                                 colStep = fromRange.colCount;
    
26.                                         var endRow = toRange.row + toRange.rowCount - 1,
    
27.                                                 endCol = toRange.col + toRange.colCount - 1;
    
28. 
    
29.                                         // if toRange bigger than fromRange, repeat paint
    
30.                                         for (var startRow = toRange.row; startRow <= endRow; startRow = startRow + rowStep) {
    
31.                                                 for (var startCol = toRange.col; startCol <= endCol; startCol = startCol + colStep) {
    
32. 
    
33.                                                         var rowCount = startRow + rowStep > endRow + 1 ? endRow - startRow + 1 : rowStep;
    
34.                                                         var colCount = startCol + colStep > endCol + 1 ? endCol - startCol + 1 : colStep;
    
35.                                                         // sheet.copyTo(fromRange.row,fromRange.col, startRow, startCol, rowCount, colCount,GC.Spread.Sheets.CopyToOptions.style | GC.Spread.Sheets.CopyToOptions.span);
    
36.                                                         var fromRanges = new GC.Spread.Sheets.Range(fromRange.row, fromRange.col, rowCount, colCount);
    
37.                                                         var pastedRange = new GC.Spread.Sheets.Range(startRow, startCol, rowCount, colCount);
    
38.                                                         spread.commandManager().execute({
    
39.                                                                 cmd: "clipboardPaste",
    
40.                                                                 sheetName: sheet.name(),
    
41.                                                                 fromSheet: fromSheet,
    
42.                                                                 fromRanges: [fromRanges],
    
43.                                                                 pastedRanges: [pastedRange],
    
44.                                                                 isCutting: false,
    
45.                                                                 clipboardText: "",
    
46.                                                                 pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.formatting
    
47.                                                         });
    
48.                                                 }
    
49.                                         }
    
50. 
    
51.                                         sheet.isPaintSuspended(false);
    
52.                                 }
    
53.                        });

复制代码

我们要想在移动鼠标的时候显示刷子就需要添加对应DOM

1. <img id="brushIcon" src="data:image/png;base64,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" style="position:absolute;z-index:10000; height:20px; display:none">

复制代码

然后监听鼠标移动的事件mousemove，将格式刷图表跟随鼠标移动

1. document.addEventListener('mousemove', function (e) {
   
2.          var e = e ? e : window.event;
   
3.          if (!isFormatPainting) {
   
4.                  $("#brushIcon").hide();
   
5.                            return;
   
6.            }
   
7.            var posx = e.pageX;
   
8.            var posy = e.pageY;
   
9. 
   
10.            var offset = $("#ss").offset();
    
11.            if (posx > offset.left && posy > offset.top &&
    
12.                      posx < offset.left + $("#ss").width() && posy < offset.top + $("#ss").height()) {
    
13.                      var brushIcon = $("#brushIcon");
    
14.                      brushIcon.show();
    
15.                      brushIcon.css("left", posx + 12 + "px");
    
16.                      brushIcon.css("top", posy + "px");
    
17.            } else {
    
18.                      $("#brushIcon").hide();
    
19.            }
    
20.                               
    
21. })

复制代码

下载附件即可查看源码

双击格式刷可以一直为格式刷状态吗

crawler 发表于 2021-3-18 23:14
双击格式刷可以一直为格式刷状态吗

目前只能选一次刷一次

DerrickJiao 发表于 2021-3-19 09:20
目前只能选一次刷一次

wps，和office 都可以双击 一致为 格式刷状态，我们可以自己开发吗

crawler 发表于 2021-3-19 14:29
wps，和office 都可以双击 一致为 格式刷状态，我们可以自己开发吗

暂时无法实现双击，您可以参考上面的demo尝试实现。这个不属于产品的标准功能，需要您二次开发。

DerrickJiao 发表于 2021-3-19 14:39
暂时无法实现双击，您可以参考上面的demo尝试实现。这个不属于产品的标准功能，需要您二次开发。

二次开发能实现也可以

crawler 发表于 2021-3-19 16:16
二次开发能实现也可以