工具栏图片客户化-VRSR工具栏客户化
目录

工具栏图片客户化

接口说明

提供了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

行市报表删除行图标

 

方法名                                                                                     方法说明

vr_ui_toolbar_filterSet1_icon

普通查询图标

vr_ui_toolbar_filterSet2_icon

自定义过滤图标

vr_ui_toolbar_fleldSet_icon

字段过滤图标

vr_ui_toolbar_sortSet_icon

排序设置图标

vr_ui_toolbar_printSet_icon

打印设置图标

vr_ui_toolbar_basicSet_icon

基本设置图标

vr_ui_toolbar_showReport_icon

展现数据图标

vr_ui_toolbar_showCol_icon(

显示隐藏列图标