请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Derrick.Jiao 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
论坛元老   /  发表于:2022-8-16 10:05  /   查看:1457  /  回复:0
本帖最后由 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。
  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, 下载次数: 33)

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部