Kendo UI for jQuery是创建现代Web应用程序的最完整UI库，本教程主要为大家介绍在使用Kendo UI for jQuery数据管理时，如何实现过滤。Kendo UI R3 2019 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库。
默认情况下，Kendo UI Grid过滤功能处于禁用状态。要控制Grid中的过滤，请使用filterable属性。
Grid使您可以实现以下过滤器选项：
- 标题行过滤
- 通过复选框过滤
- 自定义菜单过滤
标题行过滤
要启用网格标题中的过滤器行，请将模式设置为row。结果基于基础列数据的数据类型，网格将在列标题中呈现字符串值、数字输入或日期选择器的文本框进行过滤。您还可以指定默认的过滤器运算符，当用户在过滤器文本框中输入值并从键盘按Enter或Tab时将应用该默认过滤器。 要处理这种情况，请将相应列的cell设置为operator。
<!DOCTYPE html> <html> <head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /><script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script></head> <body><div id="example"> <div id="grid"></div> <script> $(document).ready(function() { $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" }, schema: { model: { fields: { OrderID: { type: "number" }, Freight: { type: "number" }, ShipName: { type: "string" }, OrderDate: { type: "date" }, ShipCity: { type: "string" } } } }, pageSize: 20, serverPaging: true, serverFiltering: true, }, height: 550, filterable: { mode: "row" }, pageable: true, columns: [{ field: "OrderID", width: 225, filterable: { cell: { showOperators: false } } }, { field: "ShipName", width: 500, title: "Ship Name", filterable: { cell: { operator: "contains", suggestionOperator: "contains" } } },{ field: "Freight", width: 255, filterable: { cell: { operator: "gte" } } },{ field: "OrderDate", title: "Order Date", format: "{0:MM/dd/yyyy}" }] }); }); </script> </div></body> </html>
通过复选框过滤
要在过滤器菜单中呈现复选框列表，请为所需的Grid列设置multi=true，还可以将复选框过滤器与itemTemplate定义结合使用，并自定义将显示的复选框项目。
<!DOCTYPE html> <html> <head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /><script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script></head> <body><div id="example"> <style> .k-multicheck-wrap { overflow-x: hidden; } </style> <div class="demo-section k-content wide"> <h4>Client Operations</h4> <div id="client"></div> </div> <div class="demo-section k-content wide"> <h4>Server Operations</h4> <div id="server"></div> </div> <script> $(document).ready(function() { var telerikWebServiceBase = "https://demos.telerik.com/kendo-ui/service/";$("#client").kendoGrid({ dataSource: { transport: { read: { url: telerikWebServiceBase + "/Products", dataType: "jsonp" }, update: { url: telerikWebServiceBase + "/Products/Update", dataType: "jsonp" }, destroy: { url: telerikWebServiceBase + "/Products/Destroy", dataType: "jsonp" }, create: { url: telerikWebServiceBase + "/Products/Create", dataType: "jsonp" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return {models: kendo.stringify(options.models)}; } } }, batch: true, pageSize: 20, schema: { model: { id: "ProductID", fields: { ProductID: { editable: false, nullable: true }, ProductName: { validation: { required: true } }, UnitPrice: { type: "number", validation: { required: true, min: 1} }, Discontinued: { type: "boolean" }, UnitsInStock: { type: "number", validation: { min: 0, required: true } } } } } }, filterable: true, pageable: true, height: 550, toolbar: ["create", "save", "cancel"], columns: [ { field: "ProductName", filterable: { multi: true, search: true} }, { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120, filterable: { multi: true } }, { field: "UnitsInStock", title: "Units In Stock", width: 120, filterable: { multi: true } }, { field: "Discontinued", width: 120, filterable: { multi: true, dataSource: [{ Discontinued: true }, { Discontinued: false }]} }, { command: "destroy", title: " ", width: 150}], editable: true });$("#server").kendoGrid({ dataSource: { type: "odata", transport: { read: telerikWebServiceBase + "Northwind.svc/Employees" }, pageSize: 20, serverPaging: true, serverSorting: true, serverFiltering: true, }, editable: true, filterable: true, pageable: true, columns: [ { field: "FirstName", title: "First Name", filterable: { multi: true , //when serverPaging of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check widgets dataSource: { transport: { read: { url: telerikWebServiceBase + "Employees/Unique", dataType: "jsonp", data: { field: "FirstName" } } } } }, width: "220px" }, { field: "LastName", filterable: { dataSource: { transport: { read: { url: telerikWebServiceBase + "Employees/Unique", dataType: "jsonp", data: { field: "LastName" } } } }, multi: true }, title: "Last Name", width: "220px" }, { field: "Country", filterable: { multi: true, dataSource: { transport: { read: { url: telerikWebServiceBase + "Employees/Unique", dataType: "jsonp", data: { field: "Country" } } } }, itemTemplate: function(e) { if (e.field == "all") { //handle the check-all checkbox template return "<div><label><strong><input type='checkbox' />#= all#</strong></label></div>"; } else { //handle the other checkboxes return "<span><label><input type='checkbox' name='" + e.field + "' value='#=Country#'/><span>#= Country #</span></label></span>" } } }, width: "220px" }, { field: "City", filterable: { multi: true, dataSource: [{ City: "Seattle", },{ City: "Tacoma", },{ City: "Kirkland", },{ City: "Redmond", },{ City: "London" }], checkAll: false }, width: "220px" }, { filterable: { multi: true, dataSource: { transport: { read: { url: telerikWebServiceBase + "Employees/Unique", dataType: "jsonp", data: { field: "Title" } } } } }, field: "Title" } ] });}); </script> </div></body> </html>
自定义菜单过滤
您可以为网格过滤器的菜单配置应用通用设置，并在每列中自定义其UI。有关实现自定义菜单筛选的可运行示例演示了如何：
- 通过设置extra = false来指定单个过滤条件；
- 将字符串列的过滤器运算符限制为仅、等于和不等于开始；
- 定义内置的日期选择器用户界面，以过滤网格中的日期时间列；
- 分别为Title和City列实例化Kendo UI AutoComplete和DropDownList。
<!DOCTYPE html> <html> <head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /><script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script></head> <body> <script src="../content/shared/js/people.js"></script><div id="example"> <div id="grid"></div><script> $(document).ready(function() { $("#grid").kendoGrid({ dataSource: { data: createRandomData(50), schema: { model: { fields: { City: { type: "string" }, Title: { type: "string" }, BirthDate: { type: "date" } } } }, pageSize: 15 }, height: 550, scrollable: true, filterable: { extra: false, operators: { string: { startswith: "Starts with", eq: "Is equal to", neq: "Is not equal to" } } }, pageable: true, columns: [ { title: "Name", width: 160, filterable: false, template: "#=FirstName# #=LastName#" }, { field: "City", width: 130, filterable: { ui: cityFilter } }, { field: "Title", filterable: { ui: titleFilter } }, { field: "BirthDate", title: "Birth Date", format: "{0:MM/dd/yyyy HH:mm tt}", filterable: { ui: "datetimepicker" } } ] }); });function titleFilter(element) { element.kendoAutoComplete({ dataSource: titles }); }function cityFilter(element) { element.kendoDropDownList({ dataSource: cities, optionLabel: "--Select Value--" }); }</script> </div></body> </html>
了解最新Kendo UI最新资讯，请关注Telerik中文网！
扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！