SpreadJS在线表格编辑器自定义功能 -- 创建弹出框（Dialog）

收藏

本帖最后由 dexteryao 于 2021-2-3 17:10 编辑

本教程教大家如何通过点击ribbon的按钮，实现弹出对话框并且自定义对话框的CheckBox、Radio。

首先，我们需要创建一个模板实例，创建一个名为”打印“的dialog页

var richSheetTagTemplate = {
title: "自定义打印",
content: [
{
type: "TabControl",
width: 670,
height: 530,
bindingPath: "dialogOption",
children: [
{
key: "Test2",
text: "打印",
children: [
CreateId
]
},
]
}
]
}

复制代码

然后，我们通过API GC.Spread.Sheets.Designer.registerTemplate()注册该模板

GC.Spread.Sheets.Designer.registerTemplate("newTab", richSheetTagTemplate);

复制代码

我们可以看到模板中有一个children为CreateID，这个就是对话框中，显示的内容。我们用了Flex、Column布局。并且写了对应的bindingPath，会在命令中用到。

var CreateId = {
type: "FlexContainer",
margin: "10px",
children: [
{
type: "FlexContainer",
children: [
{
type: "Radio",
items: [
{
text: '横向打印',
value: 'uuid'
},
{
text: '纵向打印',
value: 'rowColId',
}],
bindingPath: "type"
},
{
type: 'FlexContainer',
enableWhen: "type=uuid",
margin: '10px 0',
children: [
{
type: 'ColumnSet',
children: [
{
type: 'Column',
children: [
{
type: "CheckBox",
text: '显示边框',
bindingPath: 'row'
}
],
width: '120px'
},
{
type: 'Column',
children: [
{
type: "CheckBox",
text: '显示网格线',
bindingPath: 'col'
}
],
width: '120px'
}
]
}
]
},
{
type: 'FlexContainer',
enableWhen: "type=rowColId",
margin: '10px 0',
children: [
{
type: 'ColumnSet',
children: [
{
type: 'Column',
children: [
{
type: "CheckBox",
text: '显示行头',
bindingPath: 'cellId'
}
],
width: '120px'
},
{
type: 'Column',
children: [
{
type: "CheckBox",
text: '显示列头',
bindingPath: 'colClassName'
}
],
width: '150px'
}
]
}
]
}
]
},
]
}

复制代码

我们还需要注册"newTab"的命令，将我们要处理的逻辑写进去。我们可以将result打印出来，可以看到与我们的bindingPath的值对应绑定。

var ribbonTabCommands = {
"newTab": {
text: "页面设置",
iconClass: "ribbon-button-sheetgeneral",
bigButton: true,
commandName: "newTab",
execute: async (context) => {
var spread = context.getWorkbook();
var sheet = spread.getActiveSheet();
var sheetIndex = spread.getSheetIndex(sheet.name())
var option = {
tag: sheet.tag(),
type: "rowColId",
row: true,
// colClassName: false,
dialogOption: {
activeTab: "Test2",
showTabList: ["DefaultFormat","Test2"],
},
}
GC.Spread.Sheets.Designer.showDialog("newTab", option, (result) => {
var printInfo = sheet.printInfo();
console.log(result)
console.log(result.type)
if(result.type === "uuid"){
printInfo.orientation(GC.Spread.Sheets.Print.PrintPageOrientation.landscape);
if(result.row === true){
printInfo.showBorder(true);
printInfo.showGridLine(false);
}
if(result.col === true){
if(result.row === false){
printInfo.showBorder(false);
}
printInfo.showGridLine(true);
}
spread.print();
}
if(result.cellId === false){
printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
if(result.colClassName === false){
printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
}
if(result.colClassName === true){
printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.show);
}
spread.print();
}
if(result.cellId === true){
printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.show);
if(result.colClassName === true){
printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.show);
}
if(result.colClassName === false){
printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
}
spread.print();
}
}
}
}

复制代码

注册对应的ribbon

var ribbonPivotConfig1 = {
"label": "打印",
"thumbnailClass": "ribbon-thumbnail-spreadsettings",
"commandGroup": {
"children": [
{
"direction": "vertical",
"commands": ["newTab"]
}
]
}
}

复制代码

找到对应ribbon的buttonGroups将其push进去。

layoutRibbon.buttonGroups.push(ribbonPivotConfig1);

复制代码

实现效果如图

Derrick.Jiao · Derrick.Jiao

yu30 发表于 2021-5-18 09:25
亲有demo嘛？我本地试过，引用相关js，按照官网文档使用的，还是不行。

您可以参考这个前后端结合的demo

yu30 · yu30

亲有demo嘛？我本地试过，引用相关js，按照官网文档使用的，还是不行。

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

SpreadJS在线表格编辑器自定义功能 -- 创建弹出框（Dialog）

2 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证