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

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


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


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



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

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

1. if(context.getData("isFileModified")){
   
2.                         A(B,C);
   
3.                         context.setData("isFileModified", false);
   
4.                     }else{
   
5.                         var spread = context.getWorkbook();
   
6.                         spread.fromJSON(json1)
   
7.                     }

复制代码

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

1. function A(callback1,callback2) {
   
2.                         GC.Spread.Sheets.Designer.showMessageBox(resources.closingNotification,resources.title, GC.Spread.Sheets.Designer.MessageBoxIcon.warning,callback1,callback2,2);
   
3.                     }
   
4.                         //定义回调函数
   
5.                     function B(result) {
   
6.                         switch (result) {
   
7.                             case 2 /* yes */
   
8.                                 :
   
9.                                 var dialogOption = {
   
10.                                     text: "",
    
11.                                 };
    
12.                                 GC.Spread.Sheets.Designer.showDialog("setText", dialogOption, (result) => {
    
13.                                     if (!result) {
    
14.                                         return;
    
15.                                     }
    
16.                                     var text = result.text;
    
17.                                     var spread = context.getWorkbook();
    
18.                                     var testJson = JSON.stringify(spread.toJSON())
    
19.                                     console.log(testJson)
    
20.                                     funDownload(testJson, text + ".ssjson");
    
21.                     
    
22.                                 }, (error) => {
    
23.                                     console.error(error);
    
24.                                 }, checkResult);
    
25.                                 break;
    
26.                             case 3 /* no */
    
27.                                 :
    
28.                                 var spread = context.getWorkbook();
    
29.                                 spread.fromJSON(json1)
    
30.                                 break;
    
31.                             case 4 /* cancel */
    
32.                                 :
    
33.                                 return;
    
34.                         }
    
35.                         
    
36.                     }
    
37.                     function C() {
    
38.                         console.log('我是回调函数2') //模仿耗时操作
    
39.                     }

复制代码

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

1. var setTextTemplate = {
   
2.                 "templateName": "saveFileDialogTemplate",
   
3.                 "title": "保存文件",
   
4.                 "content": [
   
5.                     {
   
6.                         "type": "FlexContainer",
   
7.                         "children": [
   
8.                             {
   
9.                                 "type": "TextBlock",
   
10.                                 "margin": "0 0 0 10px",
    
11.                                 "text": "文件名:"
    
12.                             },
    
13.                             {
    
14.                                 "type": "ColumnSet",
    
15.                                 "margin": "10px",
    
16.                                 "children": [
    
17.                                     {
    
18.                                         "type": "Column",
    
19.                                         "children": [
    
20.                                             {
    
21.                                                 "type": "TextEditor",
    
22.                                                 "bindingPath": "text",
    
23.                                                 "margin": "2px 2px 0 0",
    
24.                                 
    
25.                                             }
    
26.                                         ],
    
27.                                         "width": "110px"
    
28.                                     },
    
29.                                     {
    
30.                                         "type": "Column",
    
31.                                         "children": [
    
32.                                             {
    
33.                                                 "type": "TextBlock",
    
34.                                                 "margin": "6px 2px 0 0",
    
35.                                                 "text": ".ssjson"
    
36.                                             }
    
37.                                         ]
    
38.                                     },
    
39.                                     {
    
40.                                         "type": "Column",
    
41.                                         "children": [
    
42.                                             {
    
43.                                                 "type": "TextBlock",
    
44.                                                 "bindingPath": "extName",
    
45.                                                 "style": "line-height:30px"
    
46.                                             }
    
47.                                         ],
    
48.                                         "width": "auto"
    
49.                                     }
    
50.                                 ]
    
51.                             }
    
52.                         ]
    
53.                     }
    
54.                 ]
    
55.             }

复制代码

记得，别忘记注册template

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

复制代码

以上就是实现这个功能的主要思路，demo怎么使用呢？可以分别试一下两个情况：1、直接点“加载模板”按钮；2、在任意单元格输入值后，再点“加载模板”按钮。
保存文件提示.html (270.55 KB, 下载次数: 128)

2022-8-16 10:07 上传

点击文件名下载附件