鼠标滑过下拉框选项时在单元格中显示对应图片

编辑
文档创建者:印然 (67260 )     浏览次数:3515次     编辑次数:17次     最近更新:ukae 于 2018-08-30     

目录:

1. 描述编辑

在填报数据的时候,通过下拉框选择图片,用户希望,当在下拉框中选择数据的时候,能在旁边的单元格中对应显示其图片,使数据填报页面可视化更强,如下图:
222

2. 思路编辑

鼠标滑过下拉框选项时,获取当前的选项值,然后显示对应名称的图片。

3. 操作步骤编辑

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

4. 预览效果编辑

4.1 PC端预览效果
保存模板,选择填报预览,点击下拉框的下拉按钮,则会初始化下拉框数据,触发重写的事件,鼠标焦点放在某个数据上时,图片单元格上就会显示对应图片,实现效果如描述中所示。
4.2 移动端预览效果
注:经测试,移动端不支该js

5. 已完成模板编辑

已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\55-鼠标滑过下拉框选项时在单元格中显示对应图片.cpt

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗? [ 去社区提问 ]