Kendo UI ListView选择功能

AABBbaby

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的选择功能处于禁用状态。

入门指南

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

[JavaScript] 纯文本查看 复制代码

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

高级配置

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

[JavaScript] 纯文本查看 复制代码

$("#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.
}
});

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

[JavaScript] 纯文本查看 复制代码

<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="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"
}
},
pageSize: 3
});

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

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

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

---

了解最新Kendo UI最新资讯，请关注Telerik中文网！