报表插件（ReportSheet），设计器添加表功能改造
本帖最后由 AlexZ 于 2024-10-9 13:37 编辑背景：
有客户提出ReportSheet添加表的按钮弹出的菜单中的选项太简单，有一些定制的参数无法输入，所以希望能够弹出一个自定制的菜单，菜单中可以定制自身业务需要的项目。
解决方案：
SpreadJS 在线表格编辑器V17.1.6版本之后支持了上述设置，可以通过下面的方案来完成对添加表按钮弹出逻辑的改写。
1.首先找到添加表的按钮出发的命令
var insertDataManagerCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.InsertDataManager);2.判断需求中是否有需要沿用源生逻辑的地方，如果有就将上述命令的execute缓存在变量中，后续沿用时需要用到
var oldExecute = insertDataManagerCommand.execute;3.改写上述命令的execute方法，下面示例代码中进行了判断，部分逻辑下会沿用改写前的execute方法。
insertDataManagerCommand.execute = (designer, selectedName, newValue) => { // overwrite the command execute function.
if (designer.getWorkbook().getActiveSheetTab() instanceof GC.Spread.Report.ReportSheet) { // whether the active sheetTab is reportsheet.
// customer add their own business logic here.
GC.Spread.Sheets.Designer.showDialog("customDialog", {tableName: "学生信息表",url: "http://127.0.0.1:3000/studentListByPage",type: "post",pageNum: 0}, (value) => {
console.log(value);
});
} else {
// go with the old execute command.
oldExecute(designer, selectedName, newValue);
}
};4.改写方法中弹出了一个自定义的dialog，dialog中定义了一些表单项供用户输入。自定义的dialog参考下面代码：
var template = { // add a customize dialog.
templateName: "customDialog",
title: "自定义页面",
content: [
{
type: "Container",
children: [
{
type: "ColumnSet",
children: [
{
type: "Column",
children: [
{
type: "TextBlock",
text: "表名:",
id: "tableName",
margin:"5px 10px"
}
],
},
{
type: "Column",
children: [
{
type: "TextEditor",
bindingPath: "tableName",
style:"width:400px"
}
]
},
]
},
{
type: "ColumnSet",
children: [
{
type: "Column",
children: [
{
type: "TextBlock",
text: "地址:",
id: "url",
margin:"5px 10px"
}
],
},
{
type: "Column",
children: [
{
type: "TextEditor",
bindingPath: "url",
style:"width:600px"
}
]
},
{
type: "Column",
children: [
{
type: "TextBlock",
text: "类型:",
id: "type",
margin:"5px 10px"
}
],
},
{
type: "Column",
children: [
{
type: "ListComboEditor",
bindingPath: "type",
items: [
{
text: "GET",
value: "get"
},
{
text: "POST",
value: "post"
},
{
text: "PUT",
value: "put"
}
]
}
]
}
],
margin:"0px 0px 5px 0px"
},
{
type: "ColumnSet",
children: [
{
type: "Column",
children: [
{
type: "TextBlock",
text: "页码:",
id: "pageNum",
margin:"5px 10px",
}
],
},
{
type: "Column",
children: [
{
type: "TextEditor",
bindingPath: "pageNum",
style: "width:50px",
}
]
},
]
}
]
}
]
};
// register this customized template.
GC.Spread.Sheets.Designer.registerTemplate("customDialog", template);
完成后运行效果如下：
点击ReportSheet的添加表按钮后，会打开新的自定义对话框：
点击确定后会执行重写后的execute方法，在控制台输出表单项中填写的内容。
示例中的控制台输出只是举一个例子，可根据实际情况自行来定制逻辑，例如添加一个数据表在数据源中等等。
完整的demo可以参考附件：
页:
[1]