想请教大神IREPORT怎么添加鼠标事件呀?

bluer 发布于 2013/06/14 11:37
阅读 656
收藏 0

@fanyongwei3 你好,想跟你请教个问题:

想请教大神IREPORT怎么添加鼠标事件呀?

加载中
0
fanyongwei3
fanyongwei3
IREPORT添加不了鼠标事件
0
心随你远行
心随你远行

你好,可以用FineReport来实现一些鼠标的功用,比如鼠标滑过下拉框选项时在单元格中显示对应图片:

1. 问题描述
在填报数据的时候,通过下拉框选择图片,用户希望,当在下拉框中选择数据的时候,能在旁边的单元格中对应显示其图片,使数据填报页面可视化更强,如下图:
2. 示例
2.1 模板准备
新建一张模板,如下图所示设计模板:
  • 下拉框
下拉框的控件名为ceshi,数据字典选择自定义,如下图:
注:要注意下拉框控件名称,在下面的js代码里面使用了控件名称调用该控件。
  • 图片单元格
B2单元格为显示图片的单元格,单元格值为<img id="simon_img" src="http://localhost:8075/WebReport/page_demo/翠鸟.png">,是一个html显示图片的标签,故该单元格的内容显示方式需要选择为用HTML显示内容,选中单元格,在右侧的单元格属性表中选择单元格属性表-其他属性>显示内容,下拉框选择用HTML显示内容,单元格中图片默认显示翠鸟,如下图:
注:要注意img标签的id,id要与下面的代码里面使用的id一致。
2.2 加载结束事件
点击模板>模板web属性>填报页面设置,为该模板添加一个加载结束事件,重写FineReport内置的点击下拉框按钮时下拉框数据初始化的方法。
原来的初始化方法中传递了三个参数,为了增强参数可读性,重写的方法中,我们更改了三个参数名称,改成$dom,showValue,index,$dom是指获取当前对象,showValue是指获取下拉框选项的显示值,index是指下拉框选择的序号,从0开始。
在原来的鼠标滑过事件中增加一个在固定单元格中显示对应图片的js,如下图:
注:由于重写了下拉框数据初始化的方法,增加的js中需要判断一下,下拉框名称是否为ceshi,也就是选择下拉框数据时,在单元格中显示对应图片的下拉框。
完整代码如下:
  1. FR.ComboBoxEditor.prototype.initContent=function ($dom, showValue, index) {  
  2.         if (showValue == null) {    
  3.             showValue = '';    
  4.         }    
  5.         var self = this;    
  6.         //初始化下拉框数据    
  7.         $dom.height(this.options.sonHeight)    
  8. .attr("title",showValue)    
  9. .text(showValue)    
  10. .addClass(index > -1 ? 'fr-combo-list-item' : 'fr-combo-list-item fr-combo-list-item-noselect')    
  11.             .hover(function (e) {    
  12.                     
  13.                 self.setFocusWithIndex(index);    
  14.                 setTimeout(function (e) {    
  15.                     if (!e) {    
  16.                         return;    
  17.                     }    
  18.                     var target = $(e.target);    
  19.                     if (self.$view[0].style.display != "none" && target.isChildAndSelfOf($(this).parent().children())) {    
  20.                         $(this).removeClass("fr-combo-selected");    
  21.                     }    
  22.                 }, 10);    
  23.                 //修改鼠标滑过下拉框数据时的事件,如果控件名为ceshi,那么就在id为img的单元格中显示路径为src的图片    
  24.                 if(self.options.widgetName=="CESHI"){   
  25.                  if(showValue!='不选'){  
  26.                 $("#img").attr("src","http://localhost:8075/WebReport/page_demo/"+showValue+".png");}  
  27.                     else  
  28.                  $("#img").attr("src","http://localhost:8075/WebReport/page_demo/翠鸟.png");  
  29.                 }       
  30.                     
  31.                     
  32.             })    
  33.             .click(function (e) {    
  34.                 self.inList = true;    
  35.                 self._setSelectedIndex(index > -1 ? index : self.getItemsLength());    
  36.                 self._onEnterPressed();    
  37.             });    
  38.     }  
2.3 图片准备
在上述代码中,src的路径为http://localhost:8075/WebReport/page_demo,故图片需要在该该路径下。
注:图片名称需要与下拉框的显示值保持一致,注意是显示值,而非实际值。


0
昊梦易醒
该评论暂时无法显示,详情咨询 QQ 群:点此入群
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部