jQuery UI组件库Kendo UI for jQuery数据管理使用教程：ListView使用技巧小分享

所有资讯

当前位置：首页 > 使用教程

jQuery UI组件库Kendo UI for jQuery数据管理使用教程：ListView使用技巧小分享

发布时间：2020-11-20

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小部件添加自定义Delete确认对话框。

<div class=”demo-section k-content wide”>
<div id=”confirmation”></div>
<a class=”k-button k-button-icontext k-add-button” href=”#”><span class=”k-icon k-add”></span>Add new record</a>
<div id=”listView”></div>
<div id=”pager” class=”k-pager-wrap”></div>
</div>

$(“#yesButton”).click(function(){
listView.dataSource.remove(product) //prepare a “destroy” request
listView.dataSource.sync() //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)
confirmPopup.close();
})
$(“#noButton”).click(function(){
confirmPopup.close();
})
}
$(document).ready(function () {
var crudServiceBaseUrl = “//demos.telerik.com/kendo-ui/service”,
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + “/Products”,
dataType: “jsonp”
},
update: {
url: crudServiceBaseUrl + “/Products/Update”,
dataType: “jsonp”
},
destroy: {
url: crudServiceBaseUrl + “/Products/Destroy”,
dataType: “jsonp”
},
create: {
url: crudServiceBaseUrl + “/Products/Create”,
dataType: “jsonp”
},
parameterMap: function(options, operation) {
if (operation !== “read” && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
pageSize: 4,
schema: {
model: {
id: “ProductID”,
fields: {
ProductID: { editable: false, nullable: true },
ProductName: “ProductName”,
UnitPrice: { type: “number” },
Discontinued: { type: “boolean” },
UnitsInStock: { type: “number” }
}
}
}
});

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

$(“#confirmation”).kendoWindow({
title: “Are you sure?”,
visible: false,
width: “250px”,
height: “120px”,
})

$(“#listView”).kendoListView({
remove: function(e) {
if(!confirm(“Do you want to delete ” + e.model.get(“ProductName”) + “?”)){
e.preventDefault();
}
},
dataSource: dataSource,
template: kendo.template($(“#template”).html()),
editTemplate: kendo.template($(“#editTemplate”).html())
})

$(“.k-add-button”).click(function(e) {
listView.add();
e.preventDefault();
});
});
</script>

.product-view dd
{
height: 46px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

}

.product-view dd .k-widget,
.product-view dd .k-textbox {
font-size: 14px;
}
.k-listview
{
border-width: 1px 0 0;
padding: 0;
overflow: hidden;
min-height: 298px;
}
.edit-buttons
{
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: right;
padding: 5px;
background-color: rgba(0,0,0,0.1);
}
.k-pager-wrap
{
border-top: 0;
}
span.k-invalid-msg
{
position: absolute;
margin-left: 6px;
}

.k-add-button {
margin-bottom: 2em;
}

@media only screen and (max-width : 620px) {

.product-view
{
width: 100%;
}
.product-view:nth-child(even) {
border-left-width: 1px;
}
}
</style>
</div>

使用滑块选择进行过滤

您的项目可能需要您根据Slider选择来过滤ListView数据源，下面的示例演示如何实现此操作并显示包含或排除的过滤功能。

filters.push({field: “ProductID”, operator: “gte”, value: slider1.values()[0]});
filters.push({field: “ProductID”, operator: “lte”, value: slider1.values()[1]});
filters.push({field: “UnitPrice”, operator: “gte”, value: slider2.values()[0]});
filters.push({field: “UnitPrice”, operator: “lte”, value: slider2.values()[1]});

filter = {
logic: “and”,
filters: filters
};

dataSource.filter(filter);
}
}).data(“kendoRangeSlider”);

var slider2 = $(“#rangeslider2”).kendoRangeSlider({
min: 1,
max: 77,
smallStep: 5,
largeStep: 10,
tickPlacement: “both”,
change: function (e) {
var filters = [],
filter;

filter = {
logic: “and”,
filters: filters
};

dataSource.filter(filter);
}
}).data(“kendoRangeSlider”);

var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: “https://demos.telerik.com/kendo-ui/service/Products”,
dataType: “jsonp”
}
}
});

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

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

</body>

在数据操作过程中保持行选择

下面的示例演示如何在ListView中的数据操作过程中保留行选择。

var dataSource = new kendo.data.DataSource({
type: “odata”,
transport: {
read: “https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders”
},
schema: {
model: {
id: “OrderID”,
fields: {
OrderID: { type: “number” },
Freight: { type: “number” },
ShipName: { type: “string” },
OrderDate: { type: “date” },
ShipCity: { type: “string” }
}
}
},
pageSize: 10,
serverPaging: true
});

var selectedOrders = [];
var idField = “OrderID”;

$(“#listview”).kendoListView({
dataSource: dataSource,
height: 400,
selectable: “multiple”,
pageable: true,
template: “<div>#:ShipCity# || #:Freight# || #:kendo.toString(OrderDate, ‘dd/MM/yyyy’)#</div>”,
change: function (e, args) {
var listview = e.sender;
var items = listview.items();
items.each(function (idx, row) {
var idValue = listview.dataSource.getByUid(row.dataset.uid).get(idField);
if (row.className.indexOf(“k-state-selected”) >= 0) {
selectedOrders[idValue] = true;
} else if (selectedOrders[idValue]) {
delete selectedOrders[idValue];
}
});
},
dataBound: function (e) {
var listview = e.sender;
var items = listview.items();
var itemsToSelect = [];
items.each(function (idx, row) {
var dataItem = listview.dataSource.getByUid(row.dataset.uid);
if (selectedOrders[dataItem[idField]]) {
itemsToSelect.push(row);
}
});

listview.select(itemsToSelect);
}
});

$(“#pager”).kendoPager({ dataSource: dataSource });
});
</script>

在DataSource Item Update上更新ListView

ListView不会在模型字段更新时动态更新内容，要重新渲染窗口小部件，请在模型更新后手动触发dataSource的change事件，下面的示例演示如何实现此操作。

<div id=”example”>
<div class=”demo-section k-content wide”>
<fieldset>
<dd>
ProductName (first data item):
</dd>
<dt>
<input data-bind=”value: newProductName” />
<button data-bind=”click: updateValue”>Set</button>
</dt>
</fieldset>
<div>
<h4>Update a record</h4>
<div data-role=”listview”
data-edit-template=”edit-template”
data-template=”template”
data-bind=”source: products,
visible: isVisible,
events: {
save: onSave
}”
style=”height: 300px; overflow: auto”></div>
</div>
<div style=”padding-top: 2em;”>
<h4>Console</h4>
<div class=”console”></div>
</div>
</div>
<script type=”text/x-kendo-tmpl” id=”template”>
<div class=”product-view k-widget”>
<dl>
<dt>Product Name</dt>
<dd>#:ProductName#</dd>
<dt>Unit Price</dt>
<dd>#:kendo.toString(UnitPrice, “c”)#</dd>
<dt>Units In Stock</dt>
<dd>#:UnitsInStock#</dd>
<dt>Discontinued</dt>
<dd>#:Discontinued#</dd>
</dl>
<div class=”edit-buttons”>
<a class=”k-button k-edit-button” href=”\\#”><span class=”k-icon k-edit”></span></a>
<a class=”k-button k-delete-button” href=”\\#”><span class=”k-icon k-delete”></span></a>
</div>
</div>
</script>

.product-view dd
{
height: 46px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

}

.product-view dd .k-widget,
.product-view dd .k-textbox {
font-size: 14px;
}
.k-listview
{
border-width: 1px 1px 1px 0;
padding: 0;
overflow: hidden;
min-height: 298px;
}
.edit-buttons
{
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: right;
padding: 5px;
background-color: rgba(0,0,0,0.1);
}
span.k-invalid-msg
{
position: absolute;
margin-left: 6px;
}

.k-add-button {
margin-bottom: 2em;
}

@media only screen and (max-width : 620px) {

.product-view
{
width: 100%;
}
.product-view:nth-child(even) {
border-left-width: 1px;
}
}
</style>
</div>

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

上一篇：用户界面控件Telerik UI for Xamarin 发布R3 2020(v2020.3.1106.460)|附下载

下一篇：测试自动化工具Telerik Test Studio正式发布R3 2020|附高速下载链接

DESKTOP

MOBILE

REPORTING & QA

WEB

PRODUCT BUNDLES

DevCraft

DESKTOP

MOBILE

REPORTING & QA

WEB

PRODUCT BUNDLES

DevCraft

所有资讯

jQuery UI组件库Kendo UI for jQuery数据管理使用教程：ListView使用技巧小分享

获取产品

联系我们

购买

产品社群

友情链接