jQuery UI组件库Kendo UI使用技巧小分享
已充值 2020-11-26 20:32:07
点击“了解更多”获取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 itconfirmPopup.center().open();$("#yesButton").click(function(){listView.dataSource.remove(product) //prepare a "destroy" requestlistView.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>
版权声明
本文为[已充值]所创,转载请带上原文链接,感谢
https://www.seoxiehui.cn/article-267705-1.html
相似文章

2021-08-09