请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Derrick.Jiao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-3-16 16:11  /   查看:3078  /  回复:6
本帖最后由 DerrickJiao 于 2021-3-16 16:19 编辑

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

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

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

接着就是在我们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.                                if (isFormatPainting) {
  13.                                           resetFormatPainting(sheet);
  14.                                           return;
  15.                                }

  16.                               fromRange = selectionRange[0];
  17.                               fromSheet = sheet;
  18.                               isFormatPainting = true;
  19.                            }
  20. }
复制代码

定义几个flag用于格式刷的标记
  1. var fromRange, fromSheet, isFormatPainting = false;

  2.                         function resetFormatPainting(sheet) {
  3.                     isFormatPainting = false;
  4.                 }
复制代码

通过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.                                         //toRange biger than fromRange
  8.                                         if (fromRange.rowCount > toRange.rowCount) {
  9.                                                 toRange.rowCount = fromRange.rowCount;
  10.                                         }
  11.                                         if (fromRange.colCount > toRange.colCount) {
  12.                                                 toRange.colCount = fromRange.colCount;
  13.                                         }
  14.                                         //toRange must in Sheet
  15.                                         if (toRange.row + toRange.rowCount > sheet.getRowCount()) {
  16.                                                 toRange.rowCount = sheet.getRowCount() - toRange.row;
  17.                                         }
  18.                                         if (toRange.col + toRange.colCount > sheet.getColumnCount()) {
  19.                                                 toRange.colCount = sheet.getColumnCount() - toRange.col;
  20.                                         }

  21.                                         var rowStep = fromRange.rowCount,
  22.                                                 colStep = fromRange.colCount;
  23.                                         var endRow = toRange.row + toRange.rowCount - 1,
  24.                                                 endCol = toRange.col + toRange.colCount - 1;

  25.                                         // if toRange bigger than fromRange, repeat paint
  26.                                         for (var startRow = toRange.row; startRow <= endRow; startRow = startRow + rowStep) {
  27.                                                 for (var startCol = toRange.col; startCol <= endCol; startCol = startCol + colStep) {

  28.                                                         var rowCount = startRow + rowStep > endRow + 1 ? endRow - startRow + 1 : rowStep;
  29.                                                         var colCount = startCol + colStep > endCol + 1 ? endCol - startCol + 1 : colStep;
  30.                                                         // sheet.copyTo(fromRange.row,fromRange.col, startRow, startCol, rowCount, colCount,GC.Spread.Sheets.CopyToOptions.style | GC.Spread.Sheets.CopyToOptions.span);
  31.                                                         var fromRanges = new GC.Spread.Sheets.Range(fromRange.row, fromRange.col, rowCount, colCount);
  32.                                                         var pastedRange = new GC.Spread.Sheets.Range(startRow, startCol, rowCount, colCount);
  33.                                                         spread.commandManager().execute({
  34.                                                                 cmd: "clipboardPaste",
  35.                                                                 sheetName: sheet.name(),
  36.                                                                 fromSheet: fromSheet,
  37.                                                                 fromRanges: [fromRanges],
  38.                                                                 pastedRanges: [pastedRange],
  39.                                                                 isCutting: false,
  40.                                                                 clipboardText: "",
  41.                                                                 pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.formatting
  42.                                                         });
  43.                                                 }
  44.                                         }

  45.                                         sheet.isPaintSuspended(false);
  46.                                 }
  47.                        });
复制代码


我们要想在移动鼠标的时候显示刷子就需要添加对应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.            var offset = $("#ss").offset();
  10.            if (posx > offset.left && posy > offset.top &&
  11.                      posx < offset.left + $("#ss").width() && posy < offset.top + $("#ss").height()) {
  12.                      var brushIcon = $("#brushIcon");
  13.                      brushIcon.show();
  14.                      brushIcon.css("left", posx + 12 + "px");
  15.                      brushIcon.css("top", posy + "px");
  16.            } else {
  17.                      $("#brushIcon").hide();
  18.            }
  19.                               
  20. })
复制代码


下载附件即可查看源码
格式刷.gif

格式刷.zip

1.24 MB, 下载次数: 46

6 个回复

倒序浏览
crawler
高级会员   /  发表于:2021-3-18 23:14:36
沙发
双击格式刷可以一直为格式刷状态吗
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-3-19 09:20:28
板凳
crawler 发表于 2021-3-18 23:14
双击格式刷可以一直为格式刷状态吗

目前只能选一次刷一次
回复 使用道具 举报
crawler
高级会员   /  发表于:2021-3-19 14:29:50
地板
DerrickJiao 发表于 2021-3-19 09:20
目前只能选一次刷一次

wps,和office 都可以双击 一致为 格式刷状态,我们可以自己开发吗
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-3-19 14:39:15
5#
crawler 发表于 2021-3-19 14:29
wps,和office 都可以双击 一致为 格式刷状态,我们可以自己开发吗

暂时无法实现双击,您可以参考上面的demo尝试实现。这个不属于产品的标准功能,需要您二次开发。
回复 使用道具 举报
crawler
高级会员   /  发表于:2021-3-19 16:16:00
6#
DerrickJiao 发表于 2021-3-19 14:39
暂时无法实现双击,您可以参考上面的demo尝试实现。这个不属于产品的标准功能,需要您二次开发。

二次开发能实现也可以
回复 使用道具 举报
Derrick.Jiao讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2021-3-19 16:28:36
7#
crawler 发表于 2021-3-19 16:16
二次开发能实现也可以

回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部