Kendo UI for jQuery數(shù)據(jù)管理使用教程:行模板
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是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。
行模板
Kendo UI Grid支持行模板,使您可以將自定義內(nèi)容放入Grid行。
有關(guān)可運行的示例,請參閱:
- Demo on using the row template of the Grid
- Demo on using the detail-row template of the Grid
- Demo on using the toolbar template of the Grid
如果從div元素初始化Grid,則可以通過使用腳本標(biāo)簽中的模板或列對象上的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函數(shù)對其進行初始化,來將前一種方法指定為每行的模板。 結(jié)果,電子郵件地址是一個交互式超鏈接,當(dāng)用戶單擊它時,它將打開一個新的電子郵件。
$("#grid").kendoGrid({ rowTemplate: kendo.template($("#template").html()), // Other configuration. });
如圖:具有已應(yīng)用行模板的網(wǎng)格