jQuery UI组件库Kendo UI使用技巧小分享

AABBbaby

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确认对话框。

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

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

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

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

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

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

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

<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中文网！