报表插件（ReportSheet），设计器添加表功能改造

背景：

有客户提出ReportSheet添加表的按钮弹出的菜单中的选项太简单，有一些定制的参数无法输入，所以希望能够弹出一个自定制的菜单，菜单中可以定制自身业务需要的项目。
解决方案：
SpreadJS 在线表格编辑器V17.1.6版本之后支持了上述设置，可以通过下面的方案来完成对添加表按钮弹出逻辑的改写。

1.首先找到添加表的按钮出发的命令

1. var insertDataManagerCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.InsertDataManager);

复制代码

2.判断需求中是否有需要沿用源生逻辑的地方，如果有就将上述命令的execute缓存在变量中，后续沿用时需要用到

1. var oldExecute = insertDataManagerCommand.execute;

复制代码

3.改写上述命令的execute方法，下面示例代码中进行了判断，部分逻辑下会沿用改写前的execute方法。

1. insertDataManagerCommand.execute = (designer, selectedName, newValue) => { // overwrite the command execute function.
   
2.   if (designer.getWorkbook().getActiveSheetTab() instanceof GC.Spread.Report.ReportSheet) { // whether the active sheetTab is reportsheet.
   
3.     // customer add their own business logic here.
   
4.     GC.Spread.Sheets.Designer.showDialog("customDialog", {tableName: "学生信息表",url: "http://127.0.0.1:3000/studentListByPage",type:              "post",pageNum: 0}, (value) => {
   
5.         console.log(value);
   
6.     });
   
7.   } else {
   
8.     // go with the old execute command.
   
9.     oldExecute(designer, selectedName, newValue);
   
10.   }
    
11.                         };

复制代码

4.改写方法中弹出了一个自定义的dialog，dialog中定义了一些表单项供用户输入。自定义的dialog参考下面代码：

1. var template = { // add a customize dialog.
   
2.                                 templateName: "customDialog",
   
3.                                 title: "自定义页面",
   
4.                                 content: [
   
5.                                         {
   
6.                                                 type: "Container",
   
7.                                                 children: [
   
8.                                                         {
   
9.                                                                 type: "ColumnSet",
   
10.                                                                 children: [
    
11.                                                                         {
    
12.                                                                                 type: "Column",
    
13.                                                                                 children: [
    
14.                                                                                         {
    
15.                                                                                                 type: "TextBlock",
    
16.                                                                                                 text: "表名:",
    
17.                                                                                                 id: "tableName",
    
18.                                                                                                 margin:"5px 10px"
    
19.                                                                                         }
    
20.                                                                                 ],
    
21.                                                                         },
    
22.                                                                         {
    
23.                                                                                 type: "Column",
    
24.                                                                                 children: [
    
25.                                                                                         {
    
26.                                                                                                 type: "TextEditor",
    
27.                                                                                                 bindingPath: "tableName",
    
28.                                                                                                 style:"width:400px"
    
29.                                                                                         }
    
30.                                                                                 ]
    
31.                                                                         },
    
32.                                                                 ]
    
33.                                                         },
    
34.                                                         {
    
35.                                                                 type: "ColumnSet",
    
36.                                                                 children: [
    
37.                                                                         {
    
38.                                                                                 type: "Column",
    
39.                                                                                 children: [
    
40.                                                                                         {
    
41.                                                                                                 type: "TextBlock",
    
42.                                                                                                 text: "地址:",
    
43.                                                                                                 id: "url",
    
44.                                                                                                 margin:"5px 10px"
    
45.                                                                                         }
    
46.                                                                                 ],
    
47.                                                                         },
    
48.                                                                         {
    
49.                                                                                 type: "Column",
    
50.                                                                                 children: [
    
51.                                                                                         {
    
52.                                                                                                 type: "TextEditor",
    
53.                                                                                                 bindingPath: "url",
    
54.                                                                                                 style:"width:600px"
    
55.                                                                                         }
    
56.                                                                                 ]
    
57.                                                                         },
    
58.                                                                         {
    
59.                                                                                 type: "Column",
    
60.                                                                                 children: [
    
61.                                                                                         {
    
62.                                                                                                 type: "TextBlock",
    
63.                                                                                                 text: "类型:",
    
64.                                                                                                 id: "type",
    
65.                                                                                                 margin:"5px 10px"
    
66.                                                                                         }
    
67.                                                                                 ],
    
68.                                                                         },
    
69.                                                                         {
    
70.                                                                                 type: "Column",
    
71.                                                                                 children: [
    
72.                                                                                         {
    
73.                                                                                                 type: "ListComboEditor",
    
74.                                                                                                 bindingPath: "type",
    
75.                                                                                                 items: [
    
76.                                                                                                         {
    
77.                                                                                                                 text: "GET",
    
78.                                                                                                                 value: "get"
    
79.                                                                                                         },
    
80.                                                                                                         {
    
81.                                                                                                                 text: "POST",
    
82.                                                                                                                 value: "post"
    
83.                                                                                                         },
    
84.                                                                                                         {
    
85.                                                                                                                 text: "PUT",
    
86.                                                                                                                 value: "put"
    
87.                                                                                                         }        
    
88.                                                                                                 ]
    
89.                                                                                         }
    
90.                                                                                 ]
    
91.                                                                         }
    
92.                                                                 ],
    
93.                                                                 margin:"0px 0px 5px 0px"
    
94.                                                         },
    
95.                                                         {
    
96.                                                                 type: "ColumnSet",
    
97.                                                                 children: [
    
98.                                                                         {
    
99.                                                                                 type: "Column",
    
100.                                                                                 children: [
     
101.                                                                                         {
     
102.                                                                                                 type: "TextBlock",
     
103.                                                                                                 text: "页码:",
     
104.                                                                                                 id: "pageNum",
     
105.                                                                                                 margin:"5px 10px",
     
106.                                                                                         }
     
107.                                                                                 ],
     
108.                                                                         },
     
109.                                                                         {
     
110.                                                                                 type: "Column",
     
111.                                                                                 children: [
     
112.                                                                                         {
     
113.                                                                                                 type: "TextEditor",
     
114.                                                                                                 bindingPath: "pageNum",
     
115.                                                                                                 style: "width:50px",
     
116.                                                                                         }
     
117.                                                                                 ]
     
118.                                                                         },
     
119.                                                                 ]
     
120.                                                         }
     
121.                                                 ]
     
122.                                         }
     
123.                                 ]
     
124.                         };
     
125.                         // register this customized template.
     
126.                         GC.Spread.Sheets.Designer.registerTemplate("customDialog", template);

复制代码

完成后运行效果如下：
点击ReportSheet的添加表按钮后，会打开新的自定义对话框：

点击确定后会执行重写后的execute方法，在控制台输出表单项中填写的内容。
示例中的控制台输出只是举一个例子，可根据实际情况自行来定制逻辑，例如添加一个数据表在数据源中等等。


完整的demo可以参考附件：