翻譯|使用教程|編輯:龔雪|2020-11-17 09:42:23.500|閱讀 256 次
概述:Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫,本文將為大家介紹Kendo UI ListView模板功能,歡迎下載最新版體驗(yàn)!
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
Kendo UI for jQuery R3 2020 SP1試用版下載
Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。
ListView使您可以使用模板來呈現(xiàn)其項(xiàng)目。
引用的模板顯示服務(wù)設(shè)置的結(jié)果。
var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://demos.telerik.com/kendo-ui/service/Products", dataType: "jsonp" } } }); $("#listView").kendoListView({ dataSource: dataSource, template: kendo.template($("#template").html()) });
下面的示例演示了建議方法的完整實(shí)現(xiàn)。
<div id="listView" style="max-height:400px;overflow:auto;"></div> <script type="text/x-kendo-tmpl" id="template"> <div class="product"> <img src="http://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" /> <h3>#:ProductName#</h3> <p>#:kendo.toString(UnitPrice, "c")#</p> </div> </script> <script> var dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://demos.telerik.com/kendo-ui/service/Products", dataType: "jsonp" } } }); $("#listView").kendoListView({ dataSource: dataSource, pageable: true, template: kendo.template($("#template").html()) }); </script>
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:慧都網(wǎng)