中文激情一区,国产AV电影网站,国产在线播放资源

Kendo UI for jQuery數(shù)據(jù)管理使用教程：過(guò)濾

原創(chuàng)|使用教程|編輯：龔雪|2019-12-24 10:16:58.320|閱讀 273 次

概述：Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)，本教程主要為大家介紹在使用Kendo UI for jQuery數(shù)據(jù)管理時(shí)，如何實(shí)現(xiàn)過(guò)濾。Kendo UI R3 2019 SP1全新發(fā)布，歡迎下載體驗(yàn)~

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關(guān)鏈接：

Kendo UI for jQuery最新試用版下載

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。

默認(rèn)情況下，Kendo UI Grid過(guò)濾功能處于禁用狀態(tài)。要控制Grid中的過(guò)濾，請(qǐng)使用filterable屬性。

Grid使您可以實(shí)現(xiàn)以下過(guò)濾器選項(xiàng)：

標(biāo)題行過(guò)濾
通過(guò)復(fù)選框過(guò)濾
自定義菜單過(guò)濾

標(biāo)題行過(guò)濾

要啟用網(wǎng)格標(biāo)題中的過(guò)濾器行，請(qǐng)將模式設(shè)置為row。結(jié)果基于基礎(chǔ)列數(shù)據(jù)的數(shù)據(jù)類型，網(wǎng)格將在列標(biāo)題中呈現(xiàn)字符串值、數(shù)字輸入或日期選擇器的文本框進(jìn)行過(guò)濾。您還可以指定默認(rèn)的過(guò)濾器運(yùn)算符，當(dāng)用戶在過(guò)濾器文本框中輸入值并從鍵盤按Enter或Tab時(shí)將應(yīng)用該默認(rèn)過(guò)濾器。要處理這種情況，請(qǐng)將相應(yīng)列的cell設(shè)置為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>

通過(guò)復(fù)選框過(guò)濾

要在過(guò)濾器菜單中呈現(xiàn)復(fù)選框列表，請(qǐng)為所需的Grid列設(shè)置multi=true，還可以將復(fù)選框過(guò)濾器與itemTemplate定義結(jié)合使用，并自定義將顯示的復(fù)選框項(xiàng)目。

<!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>

自定義菜單過(guò)濾

您可以為網(wǎng)格過(guò)濾器的菜單配置應(yīng)用通用設(shè)置，并在每列中自定義其UI。有關(guān)實(shí)現(xiàn)自定義菜單篩選的可運(yùn)行示例演示了如何：

通過(guò)設(shè)置extra = false來(lái)指定單個(gè)過(guò)濾條件；
將字符串列的過(guò)濾器運(yùn)算符限制為僅、等于和不等于開(kāi)始；
定義內(nèi)置的日期選擇器用戶界面，以過(guò)濾網(wǎng)格中的日期時(shí)間列；
分別為Title和City列實(shí)例化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>

掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊