數據管理必看！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 Filter小部件是一個統一的控件，用於篩選具備數據源的數據綁定組件。

使用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>

---

瞭解最新Kendo UI最新資訊，請關注Telerik中文網！