列表中实现悬停单元格显示图片,类似tooltip的功能

编辑
  • 文档创建者:伊丽利亚
  • 浏览次数:1142次
  • 编辑次数:1次
  • 最近更新:伊丽利亚 于 2018-11-26
  • 1. 前言+效果图

    在一个有货品的大堆数据里,用户想看某个货品的图片(清晰的),要是在列表在加一列放置货品图片,那就会 加载慢,看不清,显得列表数据更繁多.所以 就想是一个tooltip功能里面放置 当前行的货品的图片,鼠标一悬停就显示 图片,移开就 没了,多方便哪是吧

    我这里实现的是在货号 一列实现悬停。效果图:

    2.实现

    第一步:我看了下finereport下的安装路径的 X:\FineBI\webapps\WebReport\scripts 下竟然放置着bootstramp的js和css文件,那这就不用俺另外搞了。

    打开report设计工具,点击模板-模板web属性,在引用css和引用js里分别引入放置在服务器的bootstramp的css和js文件。如下图:





    第二步:在分页预览设置中为当前模板添加加载结束事件,



    第三步:写加载结束事件里的js代码

    我的情况比较麻烦,这个报表的列全是动态的,所以比较复杂,我写个固定列的demo贴上来:

    //假设你的货号列是E列,我的图片是固定url+货号,可外网访问的。这里我就放个共用的默认图片吧。如果是 ftp路径那我还真不知咋整 $(".x-table td[id^=E]").tooltip({ placement: "right", html: true, title: function() { var goodsno = $(this).html(); return '<img width=180 height=250 src="uploads/201810/20181022165252_3704.png" />'; } });

    附件列表


    主题: 设计思路
    如果您认为本文档还有待完善,请编辑

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