1. 程式人生 > 實用技巧 >Kendo UI for jQuery資料管理使用教程:行模板

Kendo UI for jQuery資料管理使用教程:行模板

Kendo UI for jQuery R2 2020 SP1試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個控制元件。Kendo UI for jQuery是建立現代Web應用程式的最完整UI庫。

行模板

Kendo UI Grid支援行模板,使您可以將自定義內容放入Grid行。

有關可執行的示例,請參閱:

如果從div元素初始化Grid,則可以通過使用指令碼標籤中的模板或列物件上的template選項中的模板來格式化Grid中的任何單元格。

下面的示例演示如何使用模板通過指令碼塊中宣告的模板將電子郵件地址格式化為超連結。

<script id="template" type="text/x-kendo-tmpl">
<tr>
<td>
#= firstName #
</td>
<td>
#= lastName #
</td>
<td>
<a href="mailto:#= email #">#= email #</a>
</td>
</tr>
</script>

下面的示例演示如何通過將其傳遞到rowTemplate選項並使用kendo.template函式對其進行初始化,來將前一種方法指定為每行的模板。 結果,電子郵件地址是一個互動式超連結,當用戶單擊它時,它將開啟一個新的電子郵件。

$("#grid").kendoGrid({
rowTemplate: kendo.template($("#template").html()),
// Other configuration.
});

如圖:具有已應用行模板的網格


瞭解最新Kendo UI最新資訊,請關注Telerik中文網!