jQuery UI组件库Kendo UI使用技巧小分享
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 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> </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中文网！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
2017-11-23 MyEclipse WebSphere开发教程：WebSphere 8安装指南（一）