Kendo UI ListView模板功能,讓Web開發更輕鬆
阿新 • • 發佈:2020-11-18
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四個控制元件。Kendo UI for jQuery是建立現代Web應用程式的最完整UI庫。
ListView使您可以使用模板來呈現其專案。
引用的模板顯示服務設定的結果。
var dataSource = new kendo.data.DataSource({ transport: { read: { url: "https://demos.telerik.com/kendo-ui/service/Products", dataType: "jsonp" } } }); $("#listView").kendoListView({ dataSource: dataSource, template: kendo.template($("#template").html()) });
下面的示例演示了建議方法的完整實現。
<div id="listView" style="max-height:400px;overflow:auto;"></div> <script type="text/x-kendo-tmpl" id="template"> <div class="product"> <img src="https://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: "https://demos.telerik.com/kendo-ui/service/Products", dataType: "jsonp" } } }); $("#listView").kendoListView({ dataSource: dataSource, pageable: true, template: kendo.template($("#template").html()) }); </script>