【新特性速遞】快速為RenderField增加提示資訊（無需藉助RendererFunction）

三生石上(FineUI控制元件)發表於2020-09-09
Function

FineUIPro/Mvc/Core的下個版本（v7.0.0），我們為RenderField增加了ShowToolTip屬性，再也無需僅僅為了一個提示資訊就寫RendererFunction了。

 

這個需求來自知識星球的網友：https://t.zsxq.com/Z7UjYrB

【新特性速遞】快速為RenderField增加提示資訊（無需藉助RendererFunction）

 

也就是說，為了給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）。　　

　　

頁面顯示效果：

【新特性速遞】快速為RenderField增加提示資訊（無需藉助RendererFunction）　

 

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

三石出品，必屬精品 

相關文章