实现提示保存功能

问题：如何实现提示保存功能

背景：

部分客户在自定义模板时想要实现对话框的功能，用于提示是否保存。

实现思路：

首先我们先了解一下这两个弹窗的本质是什么。

这是一个警告框，即MessageBox。想要调用这样一个MessageBox，可以通过showMessageBox实现。

传参分别是MessageBox的主体文本、标题、图标、成功回调、失败回调、以及下方的按钮类型。

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

API参考链接：显示对话框

这里需要用到 isFileModified 这个属性，判断是否修改。只有当我们判断到表单被修改之后，才会唤起保存弹窗，否则就是直接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的定义如下：

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

作者: GrapeCity China | 审核：Lynn.Dou | 更新时间：2023.12.22