自定义工具栏-复选框及可用状态切换
需求场景：在线表格编辑器添加复选按钮，并控制其可用状态。
实现方法：
（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()设置复选框是否可用。核心代码如下：
// 控制复选框是否可用的参数
const ISENABLED = "isEnabled"
// 定义数据保存点击命令
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(); //初始为未选中状态
}
}
// 控制复选是否可用状态
designer.setData(ISENABLED, true)
完整的示例demo可点击链接查看。
页:
[1]