Kendo UI for jQuery數據管理使用教程：過濾器狀態保持

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 for jQuery的過濾器，您可以存儲其過濾器表達式并為用戶恢復其狀態。

恢復負載狀態

例如，您只能存儲過濾器表達式，并使過濾器能夠在用戶下次訪問頁面時應用它。

下面的示例演示如何使用change事件自動應用過濾并保持Filter的最新狀態。 重新加載頁面后，存儲的設置將提供給過濾器配置并應用。

<ol><li>Change the filter.</li><li>Reload the page: <button type="button" onclick="reloadPage();">Reload</button></li><li>The widget will be initialized with the settings that were stored.</li><li>Clear the stored information to start fresh: <button onclick="clearData();">Clear</button></li></ol><div id="filter"></div><ul id="listView"></ul>
<script type="text/x-kendo-template" id="item">
  <li>
  <strong>#= name #</strong>, aged #= age #, is on vacation: #= isOnLeave #
  </li>
  </script>
<script>
  $(document).ready(function () {
  var dataSource = new kendo.data.DataSource({
  data: [
  { name: "Jane Doe", age: "25", isOnLeave: false },
  { name: "John Doe", age: "33", isOnLeave: true },
  { name: "John Smith", age: "37", isOnLeave: true },
  { name: "Nathan Doe", age: 42, isOnLeave: false }
  ],
  schema: {
  model: {
  fields: {
  name: { type: "string" },
  age: { type: "number" },
  isOnLeave: { type: "boolean" }
  }
  }
  }
  });
$("#filter").kendoFilter({
  dataSource: dataSource,
  change: applyAndStoreFilterExpression,
  expressionPreview: true,
  fields: [
  { name: "name", type: "string", label: "Name" },
  { name: "age", type: "number", label: "Age" },
  { name: "isOnLeave", type: "boolean", label: "On Vacation" }
  ],
  expression: getInitialExpression()
  }).data("kendoFilter");
if (getInitialExpression()) { // Apply filter if there was a stored expression.
  $("#filter").data("kendoFilter").applyFilter();
  }
$("#listView").kendoListView({
  dataSource: dataSource,
  template: kendo.template($("#item").html())
  });
  });
function applyAndStoreFilterExpression(e) {
  e.sender.applyFilter(); // Apply filtering on every change.
  localStorage["myInitialFilterExpression"] = JSON.stringify(e.expression); // Store the filter expression for future use.
  }
function getInitialExpression() {
  if (localStorage["myInitialFilterExpression"]) {
  return JSON.parse(localStorage["myInitialFilterExpression"]);
  }
  }
function reloadPage() {
  window.location.reload();
  }
function clearData() {
  delete localStorage["myInitialFilterExpression"];
  reloadPage();
  }
  </script>

按需加載設置

您還可以在發生應用程序邏輯事件時保存并加載篩選器的先前特定狀態。

下面的示例演示如何獲取當前的過濾器表達式和任何其他設置，并在需要時應用它們。

<ol><li>Change the state of the filter.</li><li>Save the state <button onclick="saveState();">Save</button></li><li>Change the state of the filter again.</li><li>Load the state: <button onclick="loadState();">Load</button></li><li>Clear the state: <button onclick="clearState();">Clear</button></li></ol>
<div id="filter"></div>
  <div id="chart"></div>
<script>
  $(document).ready(function () {
  var dataSource = new kendo.data.DataSource({
  data: [
  { price: 25, year: 2017 },
  { price: 29, year: 2018 },
  { price: 33, year: 2019 }
  ],
  schema: {
  model: {
  fields: {
  price: { type: "number" },
  year: { type: "number" }
  }
  }
  }
  });
$("#filter").kendoFilter({
  dataSource: dataSource,
  expressionPreview: true,
  applyButton: true,
  fields: [
  { name: "price", type: "number", label: "Cost" },
  { name: "year", type: "number", label: "Year" }
  ]
  }).data("kendoFilter");
$("#chart").kendoChart({
  dataSource: dataSource,
  series: [
  { field: "price" }
  ],
  categoryAxis: {
  field: "year"
  }
  });
  });
function saveState(e) {
  localStorage["myFilterSettings"] = JSON.stringify(getFilter().getOptions().expression);
  // You can store and restore all options not just the expression.
  }
function loadState() {
  if (localStorage["myFilterSettings"]) {
  var filter = getFilter();
  var opts = filter.getOptions();
  opts.expression = JSON.parse(localStorage["myFilterSettings"]);
  filter.setOptions(opts);
  // If you will restore all options, you need only filter.setOptions(myOptionsLiteral).
filter.applyFilter(); // Apply the new filter expression.
  }
  }
function clearState() {
  delete localStorage["myFilterSettings"];
  }
function getFilter() {
  return $("#filter").data("kendoFilter");
  }
  </script>

掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊