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

翻译|使用教程|编辑:龚雪|2020-11-20 13:12:19.720|阅读 11 次

概述:Kendo UI for jQuery是创建现代Web应用程序的最完整UI库,本文将为大家介绍Kendo UI ListView使用小技巧,欢迎下载最新版体验!

# 项目交付用正版,省下一台Iphone12 # # 31款JAVA开发必备控件和工具 #

相关链接:

Kendo UI for jQuery R3 2020 SP1试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

添加自定义删除确认对话框

下面的示例演示如何向ListView小部件添加自定义Delete确认对话框。

<div id="example">

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

<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="\\#">Edit<span class="k-icon k-i-edit"></span></a>
<a class="k-button k-delete-button" href="\\#">Built-in delete<span class="k-icon k-i-close"></span></a>
<a class="k-button k-custom-delete-button" href="\\#" onClick="deleteItem(event)">Custom delete<span class="k-icon k-i-close"></span></a>
</div>
</div>
</script>

<script type="text/x-kendo-template" id="confirmTemplate">
Delete <strong>#= ProductName #</strong> ? </p>
We have #= UnitsInStock # units in stock. </p>
<button class="k-button" id="yesButton">Yes</button>
<button class="k-button" id="noButton"> No</button>
</script>
<script type="text/x-kendo-tmpl" id="editTemplate">
<div class="product-view k-widget">
<dl>
<dt>Product Name</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" />
<span data-for="ProductName" class="k-invalid-msg"></span>
</dd>
<dt>Unit Price</dt>
<dd>
<input type="text" data-bind="value:UnitPrice" data-role="numerictextbox" data-type="number" name="UnitPrice" required="required" min="1" validationMessage="required" />
<span data-for="UnitPrice" class="k-invalid-msg"></span>
</dd>
<dt>Units In Stock</dt>
<dd>
<input type="text" data-bind="value:UnitsInStock" data-role="numerictextbox" name="UnitsInStock" required="required" data-type="number" min="0" validationMessage="required" />
<span data-for="UnitsInStock" class="k-invalid-msg"></span>
</dd>
<dt>Discontinued</dt>
<dd><input type="checkbox" name="Discontinued" data-bind="checked:Discontinued"></dd>
</dl>
<div class="edit-buttons">
<a class="k-button k-update-button" href="\\#"><span class="k-icon k-i-check"></span></a>
<a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-i-cancel"></span></a>
</div>
</div>
</script>

<script>
function deleteItem(e){
var listView = $("#listView").getKendoListView();
var productContainer = $(e.target).closest(".product-view");
var product = listView.dataItem(productContainer);
var confirmPopup = $("#confirmation").getKendoWindow();
var confirmTemplate = kendo.template($("#confirmTemplate").html());
confirmPopup.content(confirmTemplate(product)); //send the row data object to the template and render it
confirmPopup.center().open();

$("#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>

<style>
.product-view
{
float: left;
width: 50%;
height: 300px;
box-sizing: border-box;
border-top: 0;
position: relative;
}
.product-view:nth-child(even) {
border-left-width: 0;
}
.product-view dl
{
margin: 10px 10px 0;
padding: 0;
overflow: hidden;
}
.product-view dt, dd
{
margin: 0;
padding: 0;
width: 100%;
line-height: 24px;
font-size: 18px;
}
.product-view dt
{
font-size: 11px;
height: 16px;
line-height: 16px;
text-transform: uppercase;
opacity: 0.5;
}

.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数据源,下面的示例演示如何实现此操作并显示包含或排除的过滤功能。

<div id="rangeslider1" class="slider">
<input />
<input />
</div>
<span>&nbsp;&nbsp;&nbsp;</span>
<div id="rangeslider2" class="slider">
<input />
<input />
</div>

<div id="listView"></div>
<div id="pager" class="k-pager-wrap"></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}, $${UnitPrice}</h3>
<p>${kendo.toString(UnitPrice, "c")}</p>
</div>
</script>
<script>
var slider1 = $("#rangeslider1").kendoRangeSlider({
min: 1,
max: 77,
smallStep: 5,
largeStep: 10,
tickPlacement: "both",
change: function (e) {
var filters = [],
filter;

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;

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 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中的数据操作过程中保留行选择。

<div id="listview"></div>
<div id="pager"></div>

<script>
$(function () {

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事件,下面的示例演示如何实现此操作。

<base href="https://demos.telerik.com/kendo-ui/listview/mvvm">

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>

<script src="//kendo.cdn.telerik.com/2015.3.1111/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>

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

<script type="text/x-kendo-tmpl" id="edit-template">
<div class="product-view k-widget">
<dl>
<dt>Product Name</dt>
<dd>
<input type="text" class="k-textbox" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" />
<span data-for="ProductName" class="k-invalid-msg"></span>
</dd>
<dt>Unit Price</dt>
<dd>
<input type="text" data-bind="value:UnitPrice" data-role="numerictextbox" data-type="number" name="UnitPrice" required="required" min="1" validationMessage="required" />
<span data-for="UnitPrice" class="k-invalid-msg"></span>
</dd>
<dt>Units In Stock</dt>
<dd>
<input type="text" data-bind="value:UnitsInStock" data-role="numerictextbox" name="UnitsInStock" required="required" data-type="number" min="0" validationMessage="required" />
<span data-for="UnitsInStock" class="k-invalid-msg"></span>
</dd>
<dt>Discontinued</dt>
<dd><input type="checkbox" name="Discontinued" data-bind="checked:Discontinued"></dd>
</dl>
<div class="edit-buttons">
<a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
<a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
</div>
</div>
</script>
<div class="box wide">
<div class="box-col">
<h4>Configuration</h4>
<div>
<label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
</div>
</div>
<div class="box-col">
<h4>Information</h4>
Kendo UI ListView supports the
<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,
<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and
<a href="https://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
</div>
</div>
<script>
var viewModel = kendo.observable({
newProductName: "test",
updateValue: function() {
this.products.at(0).set("ProductName", this.newProductName);
this.products.trigger("change");
},
isVisible: true,
onSave: function(e) {
$(".console").append("<p>" + "event :: save(" + kendo.stringify(e.model, null, 4) + ")" + "</p>");
},
products: new kendo.data.DataSource({
schema: {
model: {
id: "ProductID"
}
},
batch: true,
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
},
update: {
url: "//demos.telerik.com/kendo-ui/service/products/update",
dataType: "jsonp"
},
destroy: {
url: "//demos.telerik.com/kendo-ui/service/products/create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
}
})
});
kendo.bind($("#example"), viewModel);
</script>
<style>
.product-view
{
float: left;
width: 50%;
height: 300px;
box-sizing: border-box;
border-top: 0;
position: relative;
}
.product-view:nth-child(even) {
border-left-width: 0;
}
.product-view dl
{
margin: 10px 10px 0;
padding: 0;
overflow: hidden;
}
.product-view dt, dd
{
margin: 0;
padding: 0;
width: 100%;
line-height: 24px;
font-size: 18px;
}
.product-view dt
{
font-size: 11px;
height: 16px;
line-height: 16px;
text-transform: uppercase;
opacity: 0.5;
}

.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中文网!

慧都2020年终大促


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:慧都网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

Kendo UI for jQuery

完整的jQuery UI组件库,可快速构建出色的高性能响应式Web应用程序。

Kendo UI for Angular

专用于Angular开发的专业级Angular UI组件。

Kendo UI Support for React

支持React Javascript框架,更快地构建更好的应用程序。

Kendo UI Support for Vue

为Vue技术框架提供可用的Kendo UI组件,更快地构建更好的Vue应用程序。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat