jQuery UI组件库使用技巧小分享,让移动、Web界面开发更简单! jQuery UIjQuerykendo ui
程序员文章站
2022-06-02 15:01:12
...
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>