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

编辑
  • 文档创建者:印然
  • 浏览次数:4845次
  • 编辑次数:18次
  • 最近更新:Kevin-s 于 2019-06-23
  • 1. 描述

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



    2. 思路

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


    3. 操作步骤

    1)新建一张模板,如下图所示设计模板:


    2)下拉框的控件名为 ceshi,数据字典选择自定义,如下图:


    注:要注意下拉框控件名称,在下面的 JS 代码里面使用了控件名称调用该控件。

    3)A1 单元格为显示图片的单元格,单元格值为<img id="simon_img" src="http://localhost:8075/webroot/help/page_demo/翠鸟.png">,是一个 HTML  显示图片的标签,故该单元格的内容显示方式需要选择为用 HTML 显示内容,选中单元格,在右侧的单元格属性表中选择单元格属性表-其他属性>显示内容,下拉框选择用 HTML 显示内容,单元格中图片默认显示翠鸟,如下图:


    注:要注意 img 标签的 id,id 要与下面的代码里面使用的 id 一致。

    4)点击模板>模板 Web 属性>填报页面设置,为该模板添加一个加载结束事件,重写 FineReport 内置的点击下拉框按钮时下拉框数据初始化的方法。

    原来的初始化方法中传递了三个参数,为了增强参数可读性,重写的方法中,我们更改了三个参数名称,改成 $domshowValueindex$dom 是指获取当前对象,showValue 是指获取下拉框选项的显示值,index 是指下拉框选择的序号,从 0 开始。

    在原来的鼠标滑过事件中增加一个在固定单元格中显示对应图片的 JS,完整代码如下:

    注:由于重写了下拉框数据初始化的方法,增加的js中需要判断一下,下拉框名称是否为 ceshi,也就是选择下拉框数据时,在单元格中显示对应图片的下拉框。

    具体 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. 已完成模板

    模板效果在线查看请点击:鼠标滑过下拉框选项时在单元格中显示对应图片.cpt

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

    点击下载模板


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

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

    此页面有帮助吗?只是浏览 [ 去社区提问 ]