SpreadJS在线表格编辑器自定义功能 -- 创建弹出框（Dialog）

本教程教大家如何通过点击ribbon的按钮，实现弹出对话框并且自定义对话框的CheckBox、Radio。

首先，我们需要创建一个模板实例，创建一个名为”打印“的dialog页

1. var richSheetTagTemplate = {
   
2.     title: "自定义打印",
   
3.       content: [
   
4.         {
   
5.           type: "TabControl",
   
6.           width: 670,
   
7.           height: 530,
   
8.           bindingPath: "dialogOption",
   
9.           children: [
   
10.             {
    
11.               key: "Test2",
    
12.               text: "打印",
    
13.               children: [
    
14.                 CreateId
    
15.               ]
    
16.             },
    
17.           ]
    
18.         }
    
19.       ]
    
20. }

复制代码

然后，我们通过API GC.Spread.Sheets.Designer.registerTemplate()注册该模板

1. GC.Spread.Sheets.Designer.registerTemplate("newTab", richSheetTagTemplate);

复制代码

我们可以看到模板中有一个children为CreateID，这个就是对话框中，显示的内容。我们用了Flex、Column布局。并且写了对应的bindingPath，会在命令中用到。

1. var CreateId = {
   
2.   type: "FlexContainer",
   
3.   margin: "10px",
   
4.   children: [
   
5.     {
   
6.       type: "FlexContainer",
   
7.       children: [
   
8.         {
   
9.           type: "Radio",
   
10.           items: [
    
11.             {
    
12.               text: '横向打印',
    
13.               value: 'uuid'
    
14.             },
    
15.             {
    
16.               text: '纵向打印',
    
17.               value: 'rowColId',
    
18.             }],
    
19.           bindingPath: "type"
    
20.         },
    
21.         {
    
22.           type: 'FlexContainer',
    
23.           enableWhen: "type=uuid",
    
24.           margin: '10px 0',
    
25.           children: [
    
26.             {
    
27.               type: 'ColumnSet',
    
28.               children: [
    
29.                 {
    
30.                   type: 'Column',
    
31.                   children: [
    
32.                     {
    
33.                       type: "CheckBox",
    
34.                       text: '显示边框',
    
35.                       bindingPath: 'row'
    
36.                     }
    
37.                   ],
    
38.                   width: '120px'
    
39.                 },
    
40.                 {
    
41.                   type: 'Column',
    
42.                   children: [
    
43.                     {
    
44.                       type: "CheckBox",
    
45.                       text: '显示网格线',
    
46.                       bindingPath: 'col'
    
47.                     }
    
48.                   ],
    
49.                   width: '120px'
    
50.                 }
    
51.               ]
    
52.             }
    
53.           ]
    
54.         },
    
55.         {
    
56.           type: 'FlexContainer',
    
57.           enableWhen: "type=rowColId",
    
58.           margin: '10px 0',
    
59.           children: [
    
60.             {
    
61.               type: 'ColumnSet',
    
62.               children: [
    
63.                 {
    
64.                   type: 'Column',
    
65.                   children: [
    
66.                     {
    
67.                       type: "CheckBox",
    
68.                       text: '显示行头',
    
69.                       bindingPath: 'cellId'
    
70.                     }
    
71.                   ],
    
72.                   width: '120px'
    
73.                 },
    
74.                 {
    
75.                   type: 'Column',
    
76.                   children: [
    
77.                     {
    
78.                       type: "CheckBox",
    
79.                       text: '显示列头',
    
80.                       bindingPath: 'colClassName'
    
81.                     }
    
82.                   ],
    
83.                   width: '150px'
    
84.                 }
    
85.               ]
    
86.             }
    
87.           ]
    
88.         }
    
89.       ]
    
90.     },
    
91. 
    
92.   ]
    
93. }

复制代码

我们还需要注册"newTab"的命令，将我们要处理的逻辑写进去。我们可以将result打印出来，可以看到与我们的bindingPath的值对应绑定。

1. 
   
2. var ribbonTabCommands = {
   
3. 
   
4.     "newTab": {
   
5.         text: "页面设置",
   
6.         iconClass: "ribbon-button-sheetgeneral",
   
7.         bigButton: true,
   
8.         commandName: "newTab",
   
9.         execute: async (context) => {
   
10. 
    
11.             var spread = context.getWorkbook();
    
12.             var sheet = spread.getActiveSheet();
    
13.             var sheetIndex = spread.getSheetIndex(sheet.name())
    
14. 
    
15.              var option = {
    
16.                 tag: sheet.tag(),
    
17.                 type: "rowColId",
    
18.                 row: true,
    
19. //                colClassName: false,
    
20.                 dialogOption: {
    
21.                     activeTab: "Test2",
    
22.                     showTabList: ["DefaultFormat","Test2"],
    
23.                 },
    
24.             }
    
25.             GC.Spread.Sheets.Designer.showDialog("newTab", option, (result) => {
    
26.                 var printInfo = sheet.printInfo();
    
27.                 console.log(result)
    
28.                 console.log(result.type)
    
29.                 if(result.type === "uuid"){
    
30.                     printInfo.orientation(GC.Spread.Sheets.Print.PrintPageOrientation.landscape);
    
31. 
    
32. 
    
33.                      if(result.row === true){
    
34.                            printInfo.showBorder(true);
    
35.                            printInfo.showGridLine(false);
    
36.                      }
    
37. 
    
38.                      if(result.col === true){
    
39. 
    
40.                            if(result.row === false){
    
41.                                 printInfo.showBorder(false);
    
42.                            }
    
43.                           printInfo.showGridLine(true);
    
44.                      }
    
45.                      spread.print();
    
46.                 }
    
47. 
    
48.                 if(result.cellId === false){
    
49. 
    
50.                     printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
    
51. 
    
52.                     if(result.colClassName === false){
    
53.                         printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
    
54.                     }
    
55. 
    
56.                      if(result.colClassName === true){
    
57.                         printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.show);
    
58.                      }
    
59. 
    
60.                     spread.print();
    
61.                 }
    
62. 
    
63.                 if(result.cellId === true){
    
64. 
    
65.                      printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.show);
    
66. 
    
67.                      if(result.colClassName === true){
    
68.                         printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.show);
    
69.                      }
    
70.                      if(result.colClassName === false){
    
71.                         printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide);
    
72.                      }
    
73.                      spread.print();
    
74.                 }
    
75.         }
    
76.     }
    
77. }

复制代码

注册对应的ribbon

1. var ribbonPivotConfig1 = {
   
2.     "label": "打印",
   
3.     "thumbnailClass": "ribbon-thumbnail-spreadsettings",
   
4.     "commandGroup": {
   
5.         "children": [
   
6.             {
   
7.                 "direction": "vertical",
   
8.                 "commands": ["newTab"]
   
9.             }
   
10.         ]
    
11.     }
    
12. }

复制代码

找到对应ribbon的buttonGroups将其push进去。

1. layoutRibbon.buttonGroups.push(ribbonPivotConfig1);

复制代码

实现效果如图

yu30 发表于 2021-5-18 09:25
亲  有demo嘛？我本地试过，引用相关js，按照官网文档使用的，还是不行。

您可以参考这个前后端结合的demo

亲  有demo嘛？我本地试过，引用相关js，按照官网文档使用的，还是不行。