SpreadJS在线表格编辑器自定义菜单栏 -- 格式刷
本帖最后由 DerrickJiao 于 2021-3-16 16:19 编辑用过Excel的小伙伴应该对格式刷不陌生，格式刷可以给我们使用模板的时候带来便利，可以快速地为指定区域添加想要的格式。那么本期教程就教大家如何在组件化编辑器中实现格式刷的功能。
这边需要用到的东西有组件版编辑器、jQuery(为了方便实现，这边就用jQuery，不想用jQuery的小伙伴可以把jQuery里要用的方法用js封装一下就行)、SelectionChanged事件以及js的mousemove事件。
首先是在ribbon中添加我们的格式刷命令，也就是在我们的config.js中添加
接着就是在我们commandMap注册这个命令
brush: {
title: "格式刷",
iconClass: "ribbon-button-brush",
commandName: "brush",
execute: async (context, propertyName, fontItalicChecked) => {
var sheet = spread.getActiveSheet();
var selectionRange = sheet.getSelections();
if (selectionRange.length > 1) {
alert("无法对多重选择区域执行此操作");
return;
}
if (isFormatPainting) {
resetFormatPainting(sheet);
return;
}
fromRange = selectionRange;
fromSheet = sheet;
isFormatPainting = true;
}
}
定义几个flag用于格式刷的标记
var fromRange, fromSheet, isFormatPainting = false;
function resetFormatPainting(sheet) {
isFormatPainting = false;
}
通过SelectionChanged格式刷添加选区的操作，也就是复制格式的操作，里面调用了clipboardPaste命令spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function(e, info) {
if (isFormatPainting) {
var sheet = spread.getActiveSheet();
resetFormatPainting(sheet);
sheet.isPaintSuspended(true);
var toRange = sheet.getSelections();
//toRange biger than fromRange
if (fromRange.rowCount > toRange.rowCount) {
toRange.rowCount = fromRange.rowCount;
}
if (fromRange.colCount > toRange.colCount) {
toRange.colCount = fromRange.colCount;
}
//toRange must in Sheet
if (toRange.row + toRange.rowCount > sheet.getRowCount()) {
toRange.rowCount = sheet.getRowCount() - toRange.row;
}
if (toRange.col + toRange.colCount > sheet.getColumnCount()) {
toRange.colCount = sheet.getColumnCount() - toRange.col;
}
var rowStep = fromRange.rowCount,
colStep = fromRange.colCount;
var endRow = toRange.row + toRange.rowCount - 1,
endCol = toRange.col + toRange.colCount - 1;
// if toRange bigger than fromRange, repeat paint
for (var startRow = toRange.row; startRow <= endRow; startRow = startRow + rowStep) {
for (var startCol = toRange.col; startCol <= endCol; startCol = startCol + colStep) {
var rowCount = startRow + rowStep > endRow + 1 ? endRow - startRow + 1 : rowStep;
var colCount = startCol + colStep > endCol + 1 ? endCol - startCol + 1 : colStep;
// sheet.copyTo(fromRange.row,fromRange.col, startRow, startCol, rowCount, colCount,GC.Spread.Sheets.CopyToOptions.style | GC.Spread.Sheets.CopyToOptions.span);
var fromRanges = new GC.Spread.Sheets.Range(fromRange.row, fromRange.col, rowCount, colCount);
var pastedRange = new GC.Spread.Sheets.Range(startRow, startCol, rowCount, colCount);
spread.commandManager().execute({
cmd: "clipboardPaste",
sheetName: sheet.name(),
fromSheet: fromSheet,
fromRanges: ,
pastedRanges: ,
isCutting: false,
clipboardText: "",
pasteOption: GC.Spread.Sheets.ClipboardPasteOptions.formatting
});
}
}
sheet.isPaintSuspended(false);
}
});
我们要想在移动鼠标的时候显示刷子就需要添加对应DOM
<img id="brushIcon" src="data:image/png;base64,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" style="position:absolute;z-index:10000; height:20px; display:none">
然后监听鼠标移动的事件mousemove，将格式刷图表跟随鼠标移动
document.addEventListener('mousemove', function (e) {
var e = e ? e : window.event;
if (!isFormatPainting) {
$("#brushIcon").hide();
return;
}
var posx = e.pageX;
var posy = e.pageY;
var offset = $("#ss").offset();
if (posx > offset.left && posy > offset.top &&
posx < offset.left + $("#ss").width() && posy < offset.top + $("#ss").height()) {
var brushIcon = $("#brushIcon");
brushIcon.show();
brushIcon.css("left", posx + 12 + "px");
brushIcon.css("top", posy + "px");
} else {
$("#brushIcon").hide();
}
})
下载附件即可查看源码
双击格式刷可以一直为格式刷状态吗 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
二次开发能实现也可以
:loap1:
页:
[1]