[表格编辑器]实现提示保存功能

收藏

本帖最后由 Derrick.Jiao 于 2022-8-16 10:08 编辑

有朋友在看了自定制编辑器——加载模板功能这篇文章之后，也实现了加载模板的功能，但是似乎还少了一步。少了什么呢？就是当我们更改完原来的表单之后，这个内容可能是需要保存的。上面的示例中，点击加载模板之后就是调用fromJSON了，就没有提示是否需要保存。那这篇文章就来教大家如何实现这个提示保存框。
首先我们先了解一下这两个弹窗的本质是什么。像这个就是一个警告框，也就是一个MessageBox。想要调用这样一个MessageBox,可以通过showMessageBox实现。
image.png934650573.png

这是api
https://demo.grapecity.com.cn/sp ... tml#.showMessageBox
他的传参分别是MessageBox的主体文本、标题、图标、成功回调、失败回调、以及下方的按钮类型。
image.png731502380.png

那下面这个是一个Template，本质和单元格格式弹窗类似，只不过更加简单一些。想要唤起Template，就需要用到接口showDialog。

image.png812441406.png

这是api，具体参数和demo，下面链接都有描述
https://demo.grapecity.com.cn/sp ... er.html#.showDialog

前面关闭编辑器保存提示弹窗这篇文章中提到 isFileModified 这个data，我们要实现判断是否修改，也依赖这个data。
当我们判断到表单被修改之后，才会唤起保存弹窗，否则就是直接fromJSON。注意：成功唤起之后，需要将这个data重新置为false。

if(context.getData("isFileModified")){
A(B,C);
context.setData("isFileModified", false);
}else{
var spread = context.getWorkbook();
spread.fromJSON(json1)
}

复制代码

唤起MessageBox的操作就是在这个function A里调用showMessageBox方法，前面两个参数，可以自己传想要的字符串进去，或者直接用我们设计器的resources。
在成功的回调函数function B中做了一个switch case，点击是的时候，就唤起保存文件的Template。这里加了一个下载逻辑，可以不用直接下载，后续可以把这个json传给后端保存都是可以的。

function A(callback1,callback2) {
GC.Spread.Sheets.Designer.showMessageBox(resources.closingNotification,resources.title, GC.Spread.Sheets.Designer.MessageBoxIcon.warning,callback1,callback2,2);
}
//定义回调函数
function B(result) {
switch (result) {
case 2 /* yes */
:
var dialogOption = {
text: "",
};
GC.Spread.Sheets.Designer.showDialog("setText", dialogOption, (result) => {
if (!result) {
return;
}
var text = result.text;
var spread = context.getWorkbook();
var testJson = JSON.stringify(spread.toJSON())
console.log(testJson)
funDownload(testJson, text + ".ssjson");
}, (error) => {
console.error(error);
}, checkResult);
break;
case 3 /* no */
:
var spread = context.getWorkbook();
spread.fromJSON(json1)
break;
case 4 /* cancel */
:
return;
}
}
function C() {
console.log('我是回调函数2') //模仿耗时操作
}

复制代码

那这个template是怎么定义的呢？参考前面定义Template的文章创建弹出框（Dialog），还有一个更直接的办法就是通过getTemplate方法去获取我们的内置的Template结构，直接去参考。

var setTextTemplate = {
"templateName": "saveFileDialogTemplate",
"title": "保存文件",
"content": [
{
"type": "FlexContainer",
"children": [
{
"type": "TextBlock",
"margin": "0 0 0 10px",
"text": "文件名:"
},
{
"type": "ColumnSet",
"margin": "10px",
"children": [
{
"type": "Column",
"children": [
{
"type": "TextEditor",
"bindingPath": "text",
"margin": "2px 2px 0 0",
}
],
"width": "110px"
},
{
"type": "Column",
"children": [
{
"type": "TextBlock",
"margin": "6px 2px 0 0",
"text": ".ssjson"
}
]
},
{
"type": "Column",
"children": [
{
"type": "TextBlock",
"bindingPath": "extName",
"style": "line-height:30px"
}
],
"width": "auto"
}
]
}
]
}
]
}

复制代码

记得，别忘记注册template

GC.Spread.Sheets.Designer.registerTemplate("setText", setTextTemplate);

复制代码

以上就是实现这个功能的主要思路，demo怎么使用呢？可以分别试一下两个情况：1、直接点“加载模板”按钮；2、在任意单元格输入值后，再点“加载模板”按钮。

保存文件提示.html (270.55 KB, 下载次数: 138)

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

[表格编辑器]实现提示保存功能

0 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证