Web UI开发神器—Kendo UI for jQuery数据管理之过滤操作

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",
   225,
  filterable: {
  cell: {
  showOperators: false
  }
  }
  },
  {
  field: "ShipName",
   500,
  title: "Ship Name",
  filterable: {
  cell: {
  operator: "contains",
  suggestionOperator: "contains"
  }
  }
  },{
  field: "Freight",
   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}",  120, filterable: { multi: true } },
  { field: "UnitsInStock", title: "Units In Stock",  120, filterable: { multi: true } },
  { field: "Discontinued",  120, filterable: { multi: true, dataSource: [{ Discontinued: true }, { Discontinued: false }]} },
  { command: "destroy", title: "&nbsp;",  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"
  }
  }
  }
  }
  },
   "220px"
  },
  {
  field: "LastName",
  filterable: { 
  dataSource: {
  transport: {
  read: {
  url: telerikWebServiceBase + "Employees/Unique",
  dataType: "jsonp",
  data: {
  field: "LastName"
  }
  }
  }
  },
  multi: true 
  },
  title: "Last Name",
   "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>"
  }
  }
  },
   "220px"
  },
  {
  field: "City",
  filterable: {
  multi: true,
  dataSource: [{
  City: "Seattle",
  },{
  City: "Tacoma",
  },{
  City: "Kirkland",
  },{
  City: "Redmond",
  },{
  City: "London"
  }],
  checkAll: false
  },
   "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",
   160,
  filterable: false,
  template: "#=FirstName# #=LastName#"
  },
  {
  field: "City",
   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微信公众号，及时获取最新动态及最新资讯