jQuery UI组件库Kendo UI for jQuery数据管理使用教程：ListView Selection-控件新闻-慧都网

jQuery UI组件库Kendo UI for jQuery数据管理使用教程：ListView Selection

原创|使用教程|编辑：龚雪|2020-10-29 11:19:24.580|阅读 173 次

概述：Kendo UI for jQuery是创建现代Web应用程序的最完整UI库，本文将为大家介绍Kendo UI ListView Selection功能，欢迎下载最新版体验！

入门指南

ListView通过将selectable属性设置为“ single”或“ multiple”来支持项目选择功能。

$("#listView").kendoListView({
dataSource: dataSource,
selectable: "multiple",
template: kendo.template($("#template").html())
});

高级配置

您还可以检测用户何时通过更改事件获得项目，该事件是通过使用Shift + select组合选择一个或多个项目时触发的。

$("#listView").kendoListView({
change: function(e) {
var data = dataSource.view();
var selected = $.map(this.select(), function(item) {
return data[$(item).index()].ProductName;
});

// Index selected or read item information through data.
}
});

下面的示例演示了建议方法的完整实现。

<div id="listView" style="max-height:400px;overflow:auto;"></div>
<div class="k-pager-wrap">
<div id="pager"></div>
</div>

<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<img src="//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: "//demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
pageSize: 3
});

$("#pager").kendoPager({
dataSource: dataSource
});

$("#listView").kendoListView({
selectable: true,
dataSource: dataSource,
template: kendo.template($("#template").html())
});
</script>

<style>
.alt { background-color: #EEE; }
</style>