本帖最后由 Ellia.Duan 于 2024-7-29 13:34 编辑
在上一篇文章中,我们介绍到可以利用"Wingdings 2 "在表格中插入一些符号。但是对于普通用户来说,让他们去记忆符号对应的键盘值,无疑是困难的。
为此,我们可以在工具栏中添加图标下拉选择,选中后设置富文本,添加这个符号。
我们想要实现这个效果,如下图所示,该如何实现呢?
我们观察上图,除了
其余部分是可以输入文字实现的。我们接下来处理,如何插入复选框符号。
1、定义菜单
我们先来实现如上图所示的一个工具栏菜单。
- var config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig));
- let fontIconConfig = {
- label: "字符集",
- commandGroup: {
- commands: ["setFontIcon"],
- }
- };
- config.ribbon[1].buttonGroups.splice(config.ribbon[1].buttonGroups.length - 1, 0, fontIconConfig);
- let fontIconCammands = {
- setFontIcon: {
- bigButton: "=ribbonHeight>toolbarHeight",
- commandName: "setFontIcon",
- direction: "=IF(ribbonHeight<toolbarHeight,"horizontal","vertical")",
- dropdownList: [
- {
- groupName: "Wingdings 2",
- groupItems: [{
- iconClass: "iconfont icon-checkbox",
- iconHeight: 20,
- iconWidth: 14,
- tip: "勾选",
- value: "R"
- }, {
- iconClass: "iconfont icon-uncheckbox",
- iconHeight: 20,
- iconWidth: 14,
- tip: "不勾选",
- value: "£"
- }
- ],
- },
- ],
- // iconClass: "ribbon-button-shapes",
- text: "字符",
- title: "插入字符",
- type: "dropdown",
- iconClass: "icon-custom-special-symbol",
- execute: async (context, selectValue) => {
- console.log(selectValue)
- },
- },
- };
- config.commandMap = {}
- Object.assign(config.commandMap, fontIconCammands)
- var designer = new GC.Spread.Sheets.Designer.Designer("gc-designer-container", config)
复制代码 通过上述代码,我们便实现了插入符号的菜单功能,这里就不详细介绍具体的实现细节,具体可以参考这篇文章。
2、重写execute
- if (selectValue != null && selectValue != undefined) {
- let sheet = context.getWorkbook().getActiveSheet(),
- row = sheet.getActiveRowIndex(),
- col = sheet.getActiveColumnIndex()
- let value = sheet.getValue(row, col, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.ValueType.richText)
- let richText = [
- {
- style: {
- font: '16px "Wingdings 2"',
- foreColor: "rgb(0, 0, 0)",
- textDecoration: 0
- },
- text: selectValue,
- }
- ]
- if (value && value.richText) {
- richText.unshift(...value.richText)
- } else {
- richText.unshift({text: sheet.getValue(row, col) == null ? '' : sheet.getValue(row, col) + ''})
- }
- let text = richText.map(item => item.text)
- let newValue = {richText, text: text.join("")}
- sheet.setValue(row, col, newValue, GC.Spread.Sheets.SheetArea.viewport);
- }
复制代码
在上述代码中,我们重写了富文本,添加了字符样式,并重新setValue
3、双击打开富文本编辑器
在双击事件中,判断如果当前单元格存在富文本,则打开富文本编辑器,如下代码:
- sheet.bind(GC.Spread.Sheets.Events.CellDoubleClick, function (e, info) {
- let value = sheet.getValue(info.row, info.col, GC.Spread.Sheets.SheetArea.viewport, GC.Spread.Sheets.ValueType.richText)
- if (value && value.richText) {
- spread.commandManager().execute({
- cmd: "richText",
- sheetName: sheet.name(),
- row: info.row,
- col: info.col
- });
- }
- });
复制代码
最后,由于菜单中无法获取单元格的焦点,所以会在单元格文本内容最后插入符号,如果有在文本中间内容插入符号的需求,可以剪切到相应位置。
完整代码可以参考附件的demo:
insert-符号.html
(14.78 KB, 下载次数: 7)
|
|