【仅供内部供应商使用,不提供对外解答和培训】
【仅供内部供应商使用,不提供对外解答和培训】
一般情况下,我们在报表展示时,如果需要特殊的提示信息,会给单元格设置一个“单元格提示”,当鼠标移动到这个格子上时可以显示出完整的格子内容。效果如下图所示:
默认的提示效果对于特别长的文字的时候并不是特别适合,这个时候就需要自定义提示信息了。
我们需要去标记需要输出到前端的格子,给HTML标签加上额外的class说明,可以使用下面这个接口来实现:
/** * 更改单元格输出成的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