美化单元格提示信息

前言

一般情况下，我们在报表展示时，如果需要特殊的提示信息，会给单元格设置一个“单元格提示”，当鼠标移动到这个格子上时可以显示出完整的格子内容。效果如下图所示：

默认的提示效果对于特别长的文字的时候并不是特别适合，这个时候就需要自定义提示信息了。

关键接口

我们需要去标记需要输出到前端的格子，给HTML标签加上额外的class说明，可以使用下面这个接口来实现：

CellTagTransformer

 /**
 * 更改单元格输出成的HTML标记Tag
 */
public interface CellTagTransformer extends Level {

    String MARK_STRING = "CellTagTransformer";
    int CURRENT_LEVEL = 1;

    /**
     * 处理单元格提示效果
     *
     * @param c        算子
     * @param tag      单元格HTML标签
     * @param tooltip  提示内容
     * @param rawValue 单元格的值
     * @return HTML标签
     */
    Tag process(Calculator c, Tag tag, String tooltip, Object rawValue);
}

下面还需要在页面加载完成后使用JavaScript来改变这个Tooltip的样式，可以使用这个页面对象事件接口：

页面事件

FR.Report.Plugin.Panel.Events

示例实现

更改单元格的HTML标签class信息实现，增加一个beautiful-tooltip的class：

public class BeautifulTooltip extends AbstractCellTagTransformer {

    @Override
    public Tag process(Calculator c, Tag tag, String tooltip, Object rawValue) {
        if (StringUtils.isBlank(tooltip)) {
            return tag;
        }
        tag.cls("beautiful-tooltip").attr("title", tooltip);
        return tag;
    }
}

再使用JavaScriptFileHander引入一个jQuery插件，结合着事件代码可以这么写：

(function($){
    FR.Report.Plugin.Panel.Events.push({

        name : 'afterload',

        action : function() {
            $('.beautiful-tooltip').poshytip();
        }
    });
})(jQuery);

最后用上插件后，提示信息就变成下面这样了：

源码

源代码可以参考这里：http://www.finedevelop.com:2015/projects/FS/repos/plugins/browse/plugin-tooltip

Page tree

美化单元格提示信息

前言

关键接口

示例实现

源码