logo Kendo UI使用教程-2019 我也要发布文档

数据管理使用教程:过滤


Kendo UI for jQuery最新试用版下载

Kendo UI目前最新提供Kendo UI for jQueryKendo UI for AngularKendo UI Support for ReactKendo 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: "&nbsp;", 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微信公众号,及时获取最新动态及最新资讯

慧聚IT微信公众号