jQuery组件库——Kendo UI ListView概述

Kendo UI for jQuery R3 2020试用版下载

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概述

Kendo UI ListView使您可以显示数据绑定项的自定义布局。

ListView非常适合以一致的方式显示项目列表，您可以在在Internet的设计结构、搜索引擎结果、Gmail中的收件箱项目、Trello中的标签列表中看到常见用法的示例。

可以使用Kendo UI DataSource组件将ListView绑定到本地JSON数据或远程数据，它使您可以控制数据的显示。它不提供数据绑定项的默认呈现，而是依靠模板来定义项目列表的显示方式，包括交替的项目和正在编辑的项目。

基本配置

若要创建ListView，请使用现有的span、div或ul HTML元素。

<ul id="listView"></ul>

下面的示例演示如何初始化ListView。

$(document).ready(function() {
$("#listView").kendoListView({
template: "<li>${FirstName} ${LastName}</li>",
dataSource: {
data: [
{
FirstName: "Joe",
LastName: "Smith"
},
{
FirstName: "Jane",
LastName: "Smith"
}]
}
});
});

以下示例通过定义目标HTML元素（例如list或div）演示ListView的工作原理，在下面的示例中，ListView项模板仅需要一个根元素，即div.product元素。

<div id="listView"></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>