【新特性速遞】快速爲RenderField增加提示信息（無需藉助RendererFunction）

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）。　　

　　

頁面顯示效果：

　

 

歡迎入夥：https://fineui.com/fans/

三石出品，必屬精品