工具栏图片客户化
接口说明
提供了JS接口,用于对工具栏图片的自定义,接口文件为:vr_ui.js
接口文件位置:应用根目录/mis2/custom/vrsr
用户可通过在【vr_ui.js】文件中,对获取功能按钮图片的js方法进行自定义实现的方式,来完成工具栏按钮图片的客户化。
注意:【vr_ui.js】接口的作用是全局的,VRSR展现报表时,会自动引入该文件,如果从文件中读取到已被实现的客户化方法,则按照客户化方法获取自定义图片;如果没有实现的客户化方法,则使用产品的默认图片。
使用方法
在【vr_ui.js】中实现需要使用自定义图片的功能按钮方法,方法的返回值必须为html字符串。
工具栏中的每一个功能按钮,都有对应的图片客户化接口方法。具体方法列表详见最末尾的【接口方法列表】小节。
例如下面js代码为使用自定义的打印按钮图片:
//实现工具栏加载自定义的打印按钮图标的js接口方法
function vr_ui_toolbar_print_icon(){
//添加加载图标的js代码
//注意:js方法返回值应为html字符串
//例如这里,是使用位于应用目录下的图片'/reportmis/images/my_print.jpg'
//而实际使用中,用户可以灵活实现自己的图片获取方式,例如也通过自己封装好的特定js接口等等
return "<img src='/reportmis/images/my_print.jpg'></img>";
}
使用VRSR展现报表时,程序会自动引入【vr_ui.js】文件,并根据该文件中实现的客户化方法来加载工具栏按钮的图片。
参考示例
下面进一步提供了一个将工具栏的【导出word】按钮使用自定义图片的示例。
【导出word】按钮的自定义图片接口方法为【vr_ui_toolbar_export_word_icon()】。
因此,需要在【vr_ui.js】文件中实现【vr_ui_toolbar_export_word_icon()】接口方法,具体代码如下:
//加载导出word图标的接口方法
function vr_ui_toolbar_export_word_icon(){
//返回图片
return "<img src='/reportmis/images/my_word.png'></img>";
}
经过上述客户化后,所有报表在展现时,工具栏的导出word按钮都将显示为自定义的图片,具体效果如下图所示:
接口方法列表
下面详细列出【vr_ui.js】文件中提供的各功能按钮图片自定义接口方法。
注意:【vr_ui.js】文件中已经预置了以下所述的各个方法,只是方法没有进行具体实现,用户在实际使用时,可根据需要直接在对应方法中添加自定义的js代码。
- 工具栏通用按钮图片客户化方法,以下方法适用于复杂报表、分组报表、交叉报表、主题报表均具有的功能按钮图片客户化:
方法名 方法说明 |
|
vr_ui_toolbar_print_icon |
加载打印图标 |
vr_ui_toolbar_export_excel_icon |
加载导出excel图标 |
vr_ui_toolbar_export_word_icon |
加载导出Word图标 |
vr_ui_toolbar_export_txt_icon |
加载导出txt图标 |
vr_ui_toolbar_export_csv_icon |
加载导出csv图标 |
vr_ui_toolbar_export_rat_icon |
加载导出rat图标 |
vr_ui_toolbar_submit_icon |
报表提交图标 |
vr_ui_toolbar_refresh_icon |
报表刷新图标 |
vr_ui_toolbar_subscribe_icon |
报表订阅图标 |
vr_ui_toolbar_prePage_icon |
报表上一页图标 |
vr_ui_toolbar_nextPage_icon |
报表下一页图标 |
vr_ui_toolbar_firstPage_icon |
第一页图标 |
vr_ui_toolbar_lastPage_icon |
最后一页图标 |
vr_ui_toolbar_remote_export_icon |
远程导出图标 |
- 仅行式报表具有的功能按钮图片客户化方法:
方法名 方法说明 |
|
vr_ui_toolbar_addTo_row_icon |
行式报表追加行图标 |
vr_ui_toolbar_insert_row_icon |
行式报表插入行图标 |
vr_ui_toolbar_delete_row_icon |
行市报表删除行图标 |
- 仅分组报表具有的功能按钮图片客户化方法: