jQuery UI组件库使用技巧小分享，让移动、Web界面开发更简单！

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