自定义工具栏-复选框及可用状态切换

收藏

需求场景：

在线表格编辑器添加复选按钮，并控制其可用状态。

实现方法：
（1）添加复选按钮：designer的config添加需要操作的按钮，声明相关命令并注册。核心代码如下：

let config = JSON.parse(JSON.stringify(GC.Spread.Sheets.Designer.DefaultConfig))
// 新增Tab
let customerRibbon = {
id: "operate",
text: "自定义操作",
buttonGroups: [
{
label: "自定义行为",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["changeLineVisible"]
}
]
}
}
]
}
// 定义数据保存点击命令
let changeLineVisibleExec = {
text: '显示打印分页线',
type: "checkbox",
enableContext: ISENABLED,
commandName: "changeLineVisible",
execute: (context) => {
let sheet = context.getWorkbook().getActiveSheet();
var isVisible = sheet.isPrintLineVisible();
sheet.isPrintLineVisible(!isVisible);
},
getState: (context) => {
// getState用于控制复选框的选中状态
let sheet = context.getWorkbook().getActiveSheet();
//设置 checkBox 初始状态
return sheet.isPrintLineVisible(); //初始为未选中状态
}
}

复制代码

上述代码中，getState()可以用于控制复选框是否选中的状态。
（2）控制复选框是否可用
在声明命令时，enableContext用于控制复选框是否可用，之后可以使用designer.setData()设置复选框是否可用。核心代码如下：

复制代码

完整的示例demo可点击链接查看。

		自动登录	找回密码
密码			立即注册

0 个回复