Kendo UI for jQuery數(shù)據(jù)管理使用教程：過濾器狀態(tài)保持

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ù)。

Kendo UI Filter小部件是一個(gè)統(tǒng)一的控件，用于篩選具有數(shù)據(jù)源的數(shù)據(jù)綁定組件。

使用Kendo UI for jQuery的過濾器，您可以存儲(chǔ)其過濾器表達(dá)式并為用戶恢復(fù)其狀態(tài)。

恢復(fù)負(fù)載狀態(tài)

例如，您只能存儲(chǔ)過濾器表達(dá)式，并使過濾器能夠在用戶下次訪問頁面時(shí)應(yīng)用它。

下面的示例演示如何使用change事件自動(dòng)應(yīng)用過濾并保持Filter的最新狀態(tài)。 重新加載頁面后，存儲(chǔ)的設(shè)置將提供給過濾器配置并應(yīng)用。

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

按需加載設(shè)置

您還可以在發(fā)生應(yīng)用程序邏輯事件時(shí)保存并加載篩選器的先前特定狀態(tài)。

下面的示例演示如何獲取當(dāng)前的過濾器表達(dá)式和任何其他設(shè)置，并在需要時(shí)應(yīng)用它們。

<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最新資訊，請(qǐng)關(guān)注Telerik中文網(wǎng)！

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