ShowTemplateByDrawer 抽屉
你可以使用它在页面中以抽屉方式打开模板。
注:此接口未使用帆软官方接口,所以支持FineReport目前所有版本的工程项目。
基础用法
javascript
WEIBW.Feedback.showTemplateByDrawer({
title: "showTemplateByDrawer",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "75%",
height: "45%",
modalclickclose: true
});
WEIBW.Feedback.showTemplateByDrawer({
title: "showTemplateByDrawer",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
width: "75%",
height: "45%",
modalclickclose: true
});
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
标题
ShowTemplateByDrawer 组件的标题由title
参数控制,如果不填写title参数会出现默认文本默认title
。
javascript
WEIBW.Feedback.showTemplateByDrawer({
title: "自定义标题",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
});
WEIBW.Feedback.showTemplateByDrawer({
title: "自定义标题",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
});
1
2
3
4
2
3
4
路由
ShowTemplateByDrawer 组件的打开的模板路径由参数url
控制,如果您填写的是当前工程下的模板文件路径,那应该类似于/webroot/decision/view/report?viewlet=***.cpt
,当然,您也可以直接填绝对地址,如https://finereport.weibw162.com
。
注意:当url
参数无值时,会自动打开当前文档所在网页,即https://finereport.weibw162.com
。
javascript
WEIBW.Feedback.showTemplateByDrawer({
title: "自定义页面地址",
url: "https://finereport.weibw162.com",
});
WEIBW.Feedback.showTemplateByDrawer({
title: "自定义页面地址",
url: "https://finereport.weibw162.com",
});
1
2
3
4
2
3
4
参数
ShowTemplateByDrawer 组件在打开模板时是支持携带参数的,参数由params
控制,他是一个json对象,您可以在这里配置您打开模板时携带的路由参数。
javascript
WEIBW.Feedback.showTemplateByDrawer({
title: "携带参数",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
});
WEIBW.Feedback.showTemplateByDrawer({
title: "携带参数",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
});
1
2
3
4
5
6
7
2
3
4
5
6
7
尺寸
ShowTemplateByDrawer 组件的尺寸由参数size
控制,可以输入百分比,如'20%'
,也可以输入固定尺寸,如'200px'
。
javascript
WEIBW.Feedback.showTemplateByDrawer({
title: "自定义宽度为屏幕50%",
url: "https://finereport.weibw162.com",
size: "50%",
});
WEIBW.Feedback.showTemplateByDrawer({
title: "自定义宽度为屏幕50%",
url: "https://finereport.weibw162.com",
size: "50%",
});
1
2
3
4
5
2
3
4
5
展开方向
ShowTemplateByDrawer 组件展开的抽屉可以有四个方向,其展开方向由参数direction
,可选值有'left'
,'right'
,'top'
,'bottom'
。
左侧展开
javascript
WEIBW.Feedback.showTemplateByDrawer({
title: "左侧展开",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
direction: "left"
});
WEIBW.Feedback.showTemplateByDrawer({
title: "左侧展开",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
direction: "left"
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
右侧展开
javascript
WEIBW.Feedback.showTemplateByDrawer({
title: "右侧展开",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
direction: "right"
});
WEIBW.Feedback.showTemplateByDrawer({
title: "右侧展开",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
direction: "right"
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
顶部展开
javascript
WEIBW.Feedback.showTemplateByDrawer({
title: "顶部展开",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
direction: "top"
});
WEIBW.Feedback.showTemplateByDrawer({
title: "顶部展开",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
direction: "top"
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
底部展开
javascript
WEIBW.Feedback.showTemplateByDrawer({
title: "底部展开",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
direction: "bottom"
});
WEIBW.Feedback.showTemplateByDrawer({
title: "底部展开",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
direction: "bottom"
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
遮罩点击关闭
ShowTemplateByDrawer 组件抽屉打开时会在原页面上层创建一个灰色的遮罩,我们可以设置点击该遮罩关闭当前drawer抽屉。该配置由参数modalclickclose
控制。
javascript
WEIBW.Feedback.showTemplateByDrawer({
title: "携带参数",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
modalclickclose: true,
});
WEIBW.Feedback.showTemplateByDrawer({
title: "携带参数",
url: "/webroot/decision/view/report?viewlet=PC端技术方案/JS实现抽屉打开报表/JS实现抽屉打开报表-子表.cpt",
params: {
"订单号": 10366,
},
modalclickclose: true,
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
关闭Drawer
如果你需要在其他JavaScript
代码中关闭当前drawer窗口,那么你只需要执行如下接口即可:
Javascript
WEIBW.Feedback.closeDrawer();
WEIBW.Feedback.closeDrawer();
1
参数解释
参数 | 说明 | 类型 | 默认值 | 是否必填 |
---|---|---|---|---|
title | 标题 | string | 无 | 是 |
url | 模板路由 | string | 无 | 是 |
params | 模板携带参数 | json 对象 | 无 | 否 |
direction | 抽屉展开方向 | enum ,可选值有'left' ,'right' ,'top' ,'bottom' | 'right' | 否 |
size | drawer窗口尺寸 | string ,可以输入百分比,如'20%' ,也可以输入固定尺寸,如'200px' | '50%' | 否 |
modalclickclose | 遮罩点击关闭 | bool ,可选项true 、false | false | 否 |