SpreadJS常用方法

Quber...大约 15 分钟SpreadJSAPI方法

SpreadJS 常用方法说明

本章，我们主要从工作簿、表单、单元格、设计器……等这几个方面对SpreadJS常用的方法或 API 进行介绍，方便我们日常中查阅！

1、工作簿

1.1、初始化

初始化表单

Html

<gc-spread-sheets @workbookInitialized="initSp"> </gc-spread-sheets>

const initSp = (spread) => {};

刷新工作簿

//此方法的作用是，如果工作簿容器的高度是动态计算设置的高度（如：height:calc(100vh - 100px)），但是在工作簿初始化前外部元素的高度还没渲染完成，有可能会造成此高度不起作用，因此，在初始化工作簿的方法中执行一下此方法即可
spread.refresh();

1.2、配置

标签栏配置

spread.options.tabStripVisible = true; //是否显示标签栏
spread.options.newTabVisible = true; //是否显示添加表单按钮
spread.options.tabEditable = true; //是否允许编辑标签名称
spread.options.tabStripPosition = GC.Spread.Sheets.TabStripPosition.left; //标签栏显示的位置，默认为bottom
spread.options.tabStripWidth = 150; //标签宽度，当tabStripPosition为left或right时生效，默认为80px
spread.options.tabStripRatio = 0.9; //标签栏所占用的宽度比例，默认为：0.6（即60%），数字范围在0~1之间

spread.getSheet(0).options.sheetTabColor = '#f00'; //设置第一个表单的标签背景色

背景配置

spread.options.backColor = '#f2f2f2'; //表单内容区域的背景色
spread.options.grayAreaBackColor = '#f89f89'; //表单内容区域以外的背景色（意思就是：假设表单有10行和10列，除开这10行和10列以外的区域的背景色）

spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.center; //背景图片布局方式
spread.options.backgroundImage = 'http://……/bg.jpg'; //背景图片地址

水印配置

spread.options.backgroundImage = canvas.toDataURL(); //背景图片
spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.none; //背景图片布局方式

注意：设置水印的代码请参见如下代码：

Html

<gc-spread-sheets @workbookInitialized="initSp"> </gc-spread-sheets>

<div id="wmId" class="spread-ext-watermark">
    <p class="fillText">测试的水印文字</p>
</div>

Css

.spread-ext-watermark {
    background: #f5dede;
    width: 400px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5;

    p {
        text-align: center;
        width: 100%;
        height: 200px;
        line-height: 200px;
        transform: rotate(-30deg);
        font-size: 25px;
        color: #f00;
    }
}

<script setup lang="ts" name="exSpreadMain">
import html2canvas from 'html2canvas'; //水印使用

//初始化工作簿
const initSp = (spread) => {
    //设置水印
    const setWatermark=()=>{
		html2canvas(document.getElementById('wmId')).then(function (canvas) {
			spread.options.backgroundImage = canvas.toDataURL();
			spread.options.backgroundImageLayout = GC.Spread.Sheets.ImageLayout.none;
			setTimeout(() => {
				document.getElementById('vp_vp').style.backgroundRepeat = 'repeat';
			}, 10);
		});
    };

    //水印相关
	if (true) {
        setWatermark();
	}

	//工作表切换事件
	spread.bind(spreadNS.Events.ActiveSheetChanged, function (e, args) {
        //水印相关
        if (true) {
            setWatermark();
        }
	});
};

滚动条配置

spread.options.scrollbarAppearance = GC.Spread.Sheets.ScrollbarAppearance.mobile; //滚动条是否设置为移动端样式

1.3、绘制

暂停和恢复绘制函数

//暂停绘制（使用暂停绘制和恢复绘制的好处是，因为Spread在表单发生改变时，会自动更新绘制，假设很多个表单很多个地方都发生了改变，这样会导致绘制的性能降低，使用了暂停和恢复绘制后，会一次性绘制，不用返回的去绘制，这样就提高了绘制的效率）
//参考官网：https://demo.grapecity.com.cn/spreadjs/help/docs/BestPractices/UsingsuspendPaintandresumePaint
spread.suspendPaint();

//一些需要大量绘制表单的逻辑代码放于此处……

//恢复绘制
spread.resumePaint();

1.4、事件

初始化事件

具体如下

let spreadNS = GC.Spread.Sheets;

//工作表切换事件
spread.bind(spreadNS.Events.ActiveSheetChanged, function (e, args) {
    //得到当前表单名称、切换前的表单名称、当前表单对象和切换前的表单对象
    //args.newSheet.name(), args.oldSheet.name(), args.newSheet, args.oldSheet);
});

//单元格点击事件
spread.bind(spreadNS.Events.CellClick, function (e, args) {
    //args.sheetArea：点击的区域（0：点击的是左上角的全选单元格、1：点击的是头部字母列那个单元格、2：点击的是左侧序号那个单元格、3：点击的是内容区域的单元格）
    //得到单元格的行索引、列索引、表单区域类型、表单名称和表单对象
    //args.row, args.col, args.sheetArea, args.sheetName, args.sheet);
});

//选择中事件
spread.bind(spreadNS.Events.SelectionChanging, function (e, args) {
    // let selection = args.newSelections.pop();
    // let sheetArea = args.sheetArea === 0 ? 'sheetCorner' : args.sheetArea === 1 ? 'columnHeader' : args.sheetArea === 2 ? 'rowHeader' : 'viewPort';
    // const eventLog =
    // 	'SpreadEvent: ' +
    // 	GC.Spread.Sheets.Events.SelectionChanging +
    // 	' event called' +
    // 	'\n' +
    // 	'sheetArea: ' +
    // 	sheetArea +
    // 	'\n' +
    // 	'row: ' +
    // 	selection.row +
    // 	'\n' +
    // 	'column: ' +
    // 	selection.col +
    // 	'\n' +
    // 	'rowCount: ' +
    // 	selection.rowCount +
    // 	'\n' +
    // 	'colCount: ' +
    // 	selection.colCount;
    // console.log(`选择中事件【${eventLog}】`, args);
});

//选择结束事件
spread.bind(spreadNS.Events.SelectionChanged, function (e, args) {
    const selection = args.newSelections.pop();

    //选中的行或列数大于1的时候才执行该事件
    if (selection.rowCount > 1 || selection.colCount > 1) {
        //得到选择的单元格行索引、列索引、行数量、列数量、选择前的范围集合、表单名称和表单对象
        //selection.row, selection.col, selection.rowCount, selection.colCount, args.oldSelections, args.sheetName, args.sheet);
    }
});

//编辑开始事件
spread.bind(spreadNS.Events.EditStarting, function (e, args) {
    // const eventLog =
    // 	'SpreadEvent: ' + GC.Spread.Sheets.Events.EditStarting + ' event called' + '\n' + 'row: ' + args.row + '\n' + 'column: ' + args.col;
    // console.log(`编辑开始事件【${eventLog}】`, args);
});

//编辑结束事件
spread.bind(spreadNS.Events.EditEnded, function (e, args) {
    //得到编辑的单元格行索引、列索引、编辑内容、表单名称和表单对象
    //args.row, args.col, args.editingText, args.sheetName, args.sheet);
});

1.6、导入导出

导出工作簿为 JSON
```
let jsonObj = spread.toJSON();
```

根据导出的工作簿 JSON 数据还原

//你导出来的JSON对象
const yourJsonObj = {};

spread.fromJSON(yourJsonObj);

1.6、表单

设置表单个数
```
spread.setSheetCount(5);
```
设置表单个数
获取表单个数
```
let count = spread.getSheetCount();
```

获取第几个表单对象

//获取第一个表单（0代表第一个、1代表第二个……）
let sheet = spread.getSheet(0);

获取当前活动（操作）的表单
```
let sheet = spread.getActiveSheet();
```

设置当前活动（操作）的表单的索引

//设置第二个表单为当前活动的表单（参数为表单的索引，从0开始）
spread.setActiveSheetIndex(1);

获取当前活动（操作）的表单的索引

let sheetIndex = spread.getActiveSheetIndex();

改变某个表单的位置

//将名称为“Sheet1”的表单调整到第三个表单的位置，第一个参数为表单名称，第二个参数为表单索引（从0开始）
spread.changeSheetIndex('Sheet1', 2);

添加新的表单

//定义新的表单，并将该表单的名称命名为“新工作簿”
let newSheet = new GC.Spread.Sheets.Worksheet('新工作簿');

//也可以通过name方法修改表单的名称
newSheet.name('新工作簿-修改后的');

//将该表单添加到工作簿的最后一个位置
//addSheet方法的第一个参数代表表单添加到的位置，0代表第一个位置、1：代表第二个位置……
spread.addSheet(spread.getSheetCount(), newSheet);

删除某个表单

//删除第一个表单
spread.removeSheet(0);

//删除第二个表单
spread.removeSheet(1);

//删除最后一个表单
spread.removeSheet(spread.getSheetCount() - 1);

删除所有表单
```
spread.clearSheets();
```

根据表单名称获取表单对象

let sheet = spread.getSheetFromName('Sheet1');

2、表单

2.1、配置

标签栏配置

sheet.options.sheetTabColor = '#f00'; //设置表单的标签背景色

表单配置

sheet.options.rowHeaderVisible = false; //是否显示行的头部栏，默认为：true
sheet.options.colHeaderVisible = false; //是否显示列的头部栏，默认为：true

sheet.options.gridline.showHorizontalGridline = false; //是否显示表单的表格边框线（水平），默认为：true
sheet.options.gridline.showVerticalGridline = false; //是否显示表单的表格边框线（垂直），默认为：true

sheet.options.showFormulas = true; //是否显示表单的公式，默认为：false

菜单配置

spread.options.allowContextMenu = false; //是否显示右键菜单，默认为：true

2.2、行数和列数

设置表单的行数和列数

//设置表单的行数为100行，列数为50列
sheet.setRowCount(100);
sheet.setColumnCount(50);

获取表单的行和列数量

//获取表单的行数量
let rowCount = sheet.getRowCount();

//获取表单的列数量
let colCount = sheet.getColumnCount();

2.3、表单名称

获取某个表单的名称
```
let name = sheet.name();
```
重命名某个表单的名称
```
sheet.name('新名称');
```

2.4、设置值

设置某单元格的值

//设置单元格的值，第一个参数为行的索引，第二个参数为列的索引
sheet.setValue(0, 1, '测试的值');

2.5、表单选择

获取表单选择的区域，返回的是 JSON 数组

//获取表单选择的区域，返回的是 JSON 数组
let selections = sheet.getSelections();

//上图所示就代表的是表单中有2个区域的选中，对应的JSON数组如下所示：
[
    {
        "row": 0, //行索引
        "col": 0, //列索引
        "rowCount": 3, //行数量
        "colCount": 2 //列数量
    },
    {
        "row": 3,
        "col": 2,
        "rowCount": 2,
        "colCount": 2
    }
]

设置表单的选择状态

//第一个参数为行的索引、第二个参数为列的索引、第三个参数为行的数量、第四个参数为列的数量
sheet.setSelection(0, 0, 3, 3);

注意，这 4 个参数还有为-1 的用法，如下所示：

//设置第4、5、6这3行整行为选择状态
sheet.setSelection(3, -1, 3, -1);

//设置第4（D）、5（E）、6（F）这3列整列为选择状态
sheet.setSelection(-1, 3, -1, 3);

取消表单单元格的选择状态
```
sheet.clearSelection();
```

2.6、表单保护

设置表单的保护（只读）状态

//方式一：通过密码设置表单为保护（只读）状态，密码为：123456
sheet.protect('123456');

//方式二：通过属性设置
sheet.options.isProtected = true;

上述设置是针对整个表单而言的，也就是上述设置后，该表单的所有单元格都是只读状态，不能修改编辑，如果想让某个单元格可以编辑，可进行如下设置：

//将行索引为0，列索引为0、行数量为2、列数量为2所在区域的单元格设置为解锁状态（可编辑状态）
sheet.getRange(0, 0, 2, 2).locked(false);

2.7、导出

将表单指定范围导出为 Html

//将该表单整个区域导出为Html
const html = sheet.getRange(-1, -1, -1, -1).toHtml(GC.Spread.Sheets.HeaderOptions.allHeaders);

//将行索引为0，列索引为0、行数量为2、列数量为2所在区域导出为Html
const html = sheet.getRange(0, 0, 2, 2).toHtml(GC.Spread.Sheets.HeaderOptions.allHeaders);

2.8、浮动元素

获取所有浮动元素
```
sheet.floatingObjects.all();
```

获取单个浮动元素

// 其中的name就为某个浮动元素的名称
sheet.floatingObjects.get('name');

删除所有浮动元素
```
sheet.floatingObjects.clear();
```

删除单个浮动元素

// 其中的name就为某个浮动元素的名称
sheet.floatingObjects.remove('name');

3、单元格

3.1、值相关

设置单元格的值

//设置第一个单元格的值为：测试
sheet.setValue(0, 0, '测试');

获取单元格的值

//获取第一个单元格的值
const cellVal = sheet.getCell(0, 0).value();

3.2、单元格类型

设置单元格为下拉列表类型

//设置第一个单元格为下拉列表类型，同时editable这个方法设置下拉列表可输可选
var comboBox = new GC.Spread.Sheets.CellTypes.ComboBox().editable(true);
comboBox.items(['测试值1', '测试值2', '测试值3']);

sheet.getCell(0, 0).cellType(comboBox);

设置单元格为单选按钮类型

var radio = new GC.Spread.Sheets.CellTypes.RadioButtonList();
radio.items(['测试值1', '测试值2', '测试值3']);
radio.isFlowLayout(true);
radio.direction(GC.Spread.Sheets.CellTypes.Direction.horizontal);
radio.itemSpacing({
    horizontal: 10,
    vertical: 10,
});
radio.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.right);
radio.boxSize(20);

sheet.getCell(0, 0).cellType(radio);

设置单元格为单个复选框类型

//设置第一个单元格为单个复选框类型
var checkbox = new GC.Spread.Sheets.CellTypes.CheckBox();
checkbox.caption('启用状态');
checkbox.textTrue('启用');
checkbox.textFalse('禁用');
checkbox.textIndeterminate('不确定');
checkbox.textAlign(GC.Spread.Sheets.CellTypes.CheckBoxTextAlign.right);
checkbox.isThreeState(true);
checkbox.boxSize(20);

sheet.getCell(0, 0).cellType(checkbox);

设置单元格为复选框组类型

//设置第一个单元格为复选框组类型
var checkboxList = new GC.Spread.Sheets.CellTypes.CheckBoxList();
checkboxList.items(['测试值1', '测试值2', '测试值3']);
checkboxList.isFlowLayout(true);
checkboxList.direction(GC.Spread.Sheets.CellTypes.Direction.horizontal);
checkboxList.itemSpacing({
    horizontal: 10,
    vertical: 10,
});
checkboxList.textAlign(GC.Spread.Sheets.CellTypes.TextAlign.right);
checkboxList.boxSize(20);

sheet.getCell(0, 0).cellType(checkboxList);

设置单元格为日期类型

//设置第一个单元格为日期类型
let cellStyle = new GC.Spread.Sheets.Style();
cellStyle.cellButtons = [
    {
        imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
        command: 'openDateTimePicker',
    },
];
cellStyle.dropDowns = [
    {
        type: GC.Spread.Sheets.DropDownType.dateTimePicker,
        option: {
            showTime: false,
        },
    },
];
cellStyle.formatter = 'yyyy-MM-dd';

sheet.getCell(0, 0).cellType(cellStyle);

设置单元格为日期范围类型

//设置第一个单元格为日期范围类型
let cellStyle = new GC.Spread.Sheets.Style();
cellStyle.cellButtons = [
    {
        imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
        command: 'openDateTimePicker',
    },
];
cellStyle.dropDowns = [
    {
        type: GC.Spread.Sheets.DropDownType.dateTimePicker,
        option: {
            showTime: false,
            showDateRange: true,
        },
    },
];
cellStyle.formatter = '=IF(ISBLANK(@), "", TEXT(@.start, "yyyy-MM-dd")&"~"&TEXT(@.end, "yyyy-MM-dd"))';

sheet.getCell(0, 0).cellType(cellStyle);

设置单元格为计算器类型

//设置第一个单元格为计算器类型
let cellStyle = new GC.Spread.Sheets.Style();
cellStyle.cellButtons = [
    {
        imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
        command: 'openCalculator',
    },
];

sheet.getCell(0, 0).cellType(cellStyle);

取消单元格类型

//得到两种设置单元格类型的方式
let cellTypeByStyle = sheet.getStyle(0, 0),
    cellTypeByCellTypes = sheet.getCell(0, 0).cellType();

if (cellTypeByStyle != null && cellTypeByStyle != undefined) {
    //取消第一个单元格的类型
    sheet.setStyle(0, 0, null);
}
if (cellTypeByCellTypes != null && cellTypeByCellTypes != undefined) {
    //取消第一个单元格的类型
    sheet.getCell(0, 0).cellType(null);
}

cellButtons 方法

或者我们可以直接使用cellButtons方法取消单元格控件类型，如下所示：

sheet.getCell(0, 0).cellButtons(null);

获取单元格类型

/**
 * 获取单元格类型名称
 * @param sheet 表单对象
 * @param row 单元格行索引
 * @param col 单元格列索引
 * @returns 返回单元格类型名称，如：button、radio、checkbox、checkboxList、hyperLink、comboBox、date、dateRange、calc
 */
const getCellType = (sheet, row: number, col: number) => {
    let cellTypeName;

    //先根据getCellType来获取
    const cellType = sheet.getCellType(row, col);

    if (cellType instanceof GC.Spread.Sheets.CellTypes.Button) {
        cellTypeName = 'button';
    } else if (cellType instanceof GC.Spread.Sheets.CellTypes.RadioButtonList) {
        cellTypeName = 'radio';
    } else if (cellType instanceof GC.Spread.Sheets.CellTypes.CheckBox) {
        cellTypeName = 'checkbox';
    } else if (cellType instanceof GC.Spread.Sheets.CellTypes.CheckBoxList) {
        cellTypeName = 'checkboxList';
    } else if (cellType instanceof GC.Spread.Sheets.CellTypes.HyperLink) {
        cellTypeName = 'hyperLink';
    } else if (cellType instanceof GC.Spread.Sheets.CellTypes.ComboBox) {
        cellTypeName = 'comboBox';
    }

    //根据getStyle来获取
    if (cellTypeName == undefined || cellTypeName == null) {
        const cellStyle = sheet.getStyle(row, col);

        if (cellStyle && cellStyle.cellButtons && cellStyle.cellButtons.length > 0) {
            if (cellStyle.cellButtons[0].command == 'openDateTimePicker') {
                if (cellStyle.dropDowns && cellStyle.dropDowns.length > 0) {
                    if (cellStyle.dropDowns[0].option.showDateRange) {
                        cellTypeName = 'dateRange';
                    } else {
                        cellTypeName = 'date';
                    }
                }
            } else if (cellStyle.cellButtons[0].command == 'openCalculator') {
                cellTypeName = 'calc';
            }
        }
    }

    return cellTypeName;
};

3.3、单元格坐标

//获取单元格坐标对象，返回的对象格式为：{x: 168, y: 100, width: 256, height: 27}
const cellRect = sheet.getCellRect(单元格.row, 单元格.col);

参考文档：https://demo.grapecity.com.cn/spreadjs/help/api/classes/GC.Spread.Sheets.Worksheet#getcellrectopen in new window

3.4、单元格标签

解释： 所谓单元格标签，就是指我们可以给单元格定义一个显示的内容，这个内容并不是真正的值，而是给用户的一种提示信息！

场景： 假设 Sheet1 中的 A1 单元格为用户必须要输入内容的单元格，为了给用户一种友好的提示，因此可以使用watermark方法设置相应的提示信息！

//设置单元格标签标签显示的内容为{检测结论}
sheet.getCell(0, 2).watermark(`{检测结论}`);

参考文档：

4、设计器

4.1、配置

获取设计器的默认配置

//设计器的默认配置
let designerConfig = GC.Spread.Sheets.Designer.DefaultConfig;

4.2、初始化

导入文件顺序

在使用设计器的时候，一定要注意各个文件的顺序，正确的、完整的顺序如下所示：

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css';
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css';
import GC from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets-charts';
import '@grapecity/spread-sheets-shapes';
import '@grapecity/spread-sheets-slicers';
import '@grapecity/spread-sheets-print';
import '@grapecity/spread-sheets-pdf';
import '@grapecity/spread-sheets-barcode';
import '@grapecity/spread-sheets-pivot-addon';
//注意：spread-sheets-tablesheet 与 spread-sheets-ganttsheet 的先后顺序
import '@grapecity/spread-sheets-tablesheet';
import '@grapecity/spread-sheets-ganttsheet';
import '@grapecity/spread-sheets-formula-panel';
import '@grapecity/spread-sheets-io';
import '@grapecity/spread-sheets-resources-zh';
//注意：spread-sheets-designer-resources-cn 与 spread-sheets-designer 的先后顺序
import '@grapecity/spread-sheets-designer-resources-cn';
import '@grapecity/spread-sheets-designer';
import GcSpreadSheetsDesigner from '@grapecity/spread-sheets-designer-vue';

初始化设计器和工作簿实例

//初始化工作簿和设计器实例
let spread = new GC.Spread.Sheets.Workbook(document.getElementById('spreadPanel')),
    designer = new CommDesigner.Designer(document.getElementById('designerPanel'), designerConfig, spread);

隐藏 Ribbon 栏

//隐藏Ribbon栏，通过样式设置
document.getElementsByClassName('gc-ribbon-bar')[0].style.display = 'none';

//该变之后要重新refresh
designer.refresh();

设定某个选项卡为活动状态

//将“插入”选项卡设置为活动状态
designer.activeRibbonTab('insert');

//涉及到的选项卡Id如下所示：
//home：开始、insert：插入、pageLayout：页面布局、formulas：公式、data：数据、view：视图、settings：设置、tableDesign：表设计、chartDesign：图表设计、pictureDesign：图片格式、shapeDesign：形状格式、pictureShapeDesign：图片格式、slicerDesign：切片器、timelineDesign：时间线、formulaSparkLineDesign：迷你图、sparkLineDesign：迷你图、barcodeDesignId：条形码设计、pivotTableAnalyze：数据透视表分析、pivotTableDesign：设计、tableSheetDesign：集算表设计、tableSheetColumnSetting：列选项、ganttSheetTask：任务、ganttSheetProject：项目、ganttSheetView：视图、ganttSheetChartFormat：甘特表格式、或自定义Id

设置 Ribbon 为折叠状态

designer.setData('isRibbonCollapse', true);

4.3、选项卡

增加一个选项卡

//增加一个名称为“绑定操作”的选项卡
designerConfig.ribbon.push({
    id: 'bindOperate',
    text: '绑定操作',
    buttonGroups: [],
});

选项卡中添加按钮及事件

designerConfig.ribbon.push({
    id: 'bindOperate',
    text: '绑定操作',
    buttonGroups: [
        {
            label: '绑定表头表尾',
            thumbnailClass: '',
            commandGroup: {
                children: [
                    {
                        direction: 'vertical',
                        commands: ['cmdBindHeader'],
                    },
                    {
                        direction: 'vertical',
                        commands: ['cmdBindFooter'],
                    },
                ],
            },
        },
        {
            label: '单元格类型',
            thumbnailClass: '',
            commandGroup: {
                children: [
                    {
                        direction: 'vertical',
                        commands: ['cmdBindCellType'],
                    },
                ],
            },
        },
        {
            label: '保存模板',
            thumbnailClass: '',
            commandGroup: {
                children: [
                    {
                        direction: 'vertical',
                        commands: ['cmdOperateSaveTemplate'],
                    },
                ],
            },
        },
    ],
});

designerConfig.commandMap = {
    cmdBindHeader: {
        title: '打开/关闭绑定表头面板',
        text: '绑定表头',
        iconClass: 'fa fa-arrow-up f-size-20 de-btn-color',
        bigButton: 'true',
        commandName: 'cmdBindHeader',
        execute: async (context, propertyName, fontItalicChecked) => {
            alert('点击了：绑定表头');
        },
    },
    cmdBindFooter: {
        title: '打开/关闭绑定表尾面板',
        text: '绑定表尾',
        iconClass: 'fa fa-arrow-down f-size-20 de-btn-color',
        bigButton: 'true',
        commandName: 'cmdBindFooter',
        execute: async (context, propertyName, fontItalicChecked) => {
            alert('点击了：绑定表尾');
        },
    },
    cmdBindCellType: {
        title: '设置单元格类型，如日期、下拉选择……',
        text: '单元格类型',
        iconClass: 'fa fa-table f-size-20 de-btn-color',
        bigButton: 'true',
        commandName: 'cmdBindCellType',
        execute: async (context, propertyName, fontItalicChecked) => {
            alert('点击了：单元格类型');
        },
    },
    cmdOperateSaveTemplate: {
        title: '保存为模板',
        text: '保存模板',
        iconClass: 'fa fa-save f-size-20 de-btn-color',
        bigButton: 'true',
        commandName: 'cmdOperateSaveTemplate',
        execute: async (context, propertyName, fontItalicChecked) => {
            alert('点击了：保存模板');
        },
    },
};

4.4、事件

绑定设计器导入完成前的事件

//在绑定方法中使用 FileLoading 事件
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoading, (type, message) => {
    if ((message.fileType = GC.Spread.Sheets.Designer.FileType.Excel)) {
        let spreadJsonData = message.data;
        if (spreadJsonData.sheetCount >= 3) {
            window.alert('Number of worksheets: ' + spreadJsonData.sheetCount);
        }
    }
});

绑定设计器导入完成后的事件

//绑定设计器导入完成后的事件
//参考文档：https://demo.grapecity.com.cn/spreadjs/help/docs/designer/spreadjs_designer_component/customizations/bind-file-import-events
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoaded, (event, data) => {
    //做一些操作，如：设置表单的行和列数
    //……
});

移除指定或所有事件的绑定

//使用unbind方法移除FileLoaded事件
designer.unbind(GC.Spread.Sheets.Designer.Events.FileLoaded);

// 使用unbindAll方法移除所有事件
designer.unbindAll();