找回密码
 立即注册

QQ登录

只需一步,快速开始

Clark.Pan 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2024-9-30 17:24  /   查看:98  /  回复:0
本帖最后由 AlexZ 于 2024-10-9 13:37 编辑

背景:

有客户提出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的添加表按钮后,会打开新的自定义对话框:
image.png331218261.png
点击确定后会执行重写后的execute方法,在控制台输出表单项中填写的内容。
示例中的控制台输出只是举一个例子,可根据实际情况自行来定制逻辑,例如添加一个数据表在数据源中等等。
image.png516873473.png

完整的demo可以参考附件:





index - 副本 (2).html

6.97 KB, 下载次数: 3

0 个回复

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