自定义对话框

问题：如何创建自定义对话框

背景：部分用户需要自定义对话框来实现一些需求。

实现方法：

首先需要创建一个模板实例，创建一个名为”打印“的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);

实现效果如图：

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