彩票走势图

Kendo UI for jQuery数据管理使用教程：过滤

原创|使用教程|编辑：龚雪|2019-12-24 10:16:58.320|阅读 232 次

概述：Kendo UI for jQuery是创建现代Web应用程序的最完整UI库，本教程主要为大家介绍在使用Kendo UI for jQuery数据管理时，如何实现过滤。Kendo UI R3 2019 SP1全新发布，欢迎下载体验~

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接：

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: "//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 = "//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>

扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯

慧聚IT微信公众号

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn

文章转载自：慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP