FineUIPro/Mvc/Core的下个版本(v7.0.0),我们为RenderField增加了ShowToolTip属性,再也无需仅仅为了一个提示信息就写RendererFunction了。
这个需求来自知识星球的网友:https://t.zsxq.com/Z7UjYrB
也就是说,为了给RenderField列增加提示信息,我们需要通过 RendererFunction 来添加,如下代码所示:
// 超链接标签 - 所学专业 function renderMajor(value, params) { var url = 'http://gsa.ustc.edu.cn/search?q=' + F.urlEncode(value); return F.formatString('<a href="{0}" data-qtip="{1}" target="_blank">{1}</a>', url, F.htmlEncode(value)); }
其中HTML标签属性data-qtip会被 FineUI 识别,并在光标移动到目标节点时,显示提示信息。
当然这个例子是为了渲染一个超链接,如果需求是生成一个包含提示信息的普通文本,则同样需要借助于RendererFunction:
<f:RenderField HeaderText="所学专业" DataField="Major" RendererFunction="renderMajor" Width="150px" />
对应的列渲染函数:
function renderMajor(value) { return F.formatString('<span data-qtip="{0}">{0}</span>', F.htmlEncode(value)); }
虽然能够实现功能,但是代码却有点啰嗦。
下个版本,我们会针对这种情况进行优化,仅仅通过一个属性ShowToolTip就能实现上面的功能:
<f:RenderField HeaderText="所学专业" DataField="Major" ShowToolTip="true" ToolTipPosition="TopStart" Width="150px" />
是不是很简洁,而且还能指定提示信息的显示位置(ToolTipPosition)。
页面显示效果:
三石出品,必属精品