找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › SpreadJS & GcExcel专区 › 教程集锦 › 查看内容
发新帖

Derrick.Jiao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证

论坛元老

122

主题

1万

帖子

1万

积分

论坛元老

积分
16481

SpreadJS 高级认证讲师达人GrapeCity悬赏达人SpreadJS 认证

最新发帖

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

Derrick.Jiao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于：2021-3-16 16:11  /   查看：4754  /  回复：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.                                }

  13.                                if (isFormatPainting) {
  14.                                           resetFormatPainting(sheet);
  15.                                           return;
  16.                                }

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

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

  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];


  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.                                         }

  24.                                         var rowStep = fromRange.rowCount,
  25.                                                 colStep = fromRange.colCount;
  26.                                         var endRow = toRange.row + toRange.rowCount - 1,
  27.                                                 endCol = toRange.col + toRange.colCount - 1;

  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) {

  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.                                         }

  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;

  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. })
复制代码


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

格式刷.zip

1.24 MB, 下载次数: 414

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
二次开发能实现也可以
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部