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中文网!

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

数据管理必看!Kendo UI for jQuery过滤器状态保持的更多相关文章

  1. 数据管理必看!Kendo UI for jQuery过滤器的全球化

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  2. 数据管理必看!Kendo UI for jQuery过滤器概述

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  3. Web界面开发必看!Kendo UI for jQuery编辑功能指南第二弹

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  4. Web界面开发必看!Kendo UI for jQuery编辑功能指南第一弹

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  5. Web UI开发神器—Kendo UI for jQuery数据管理之过滤操作

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  6. Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  7. Kendo UI for jQuery自定义小部件第一弹!不得不看的入门指南

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

  8. 不知如何摧毁Kendo UI for jQuery小部件?这份指南不得不看

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  9. Web UI开发速速种草—Kendo UI for jQuery网格编辑操作概述

    Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...

随机推荐

  1. TP5之事务处理

    事务: 执行完A事件然后执行B事件,AB事件都执行完才算完成.可是有时候由于某些因素,A事件执行完,还没来得及执行B事件.怎么办?就需要回到A事件执行前.这种事情多见于电商支付功能. mysql事务要 ...

  2. LeetCode之链表总结

    链表提供了高效的节点重排能力,以及顺序性的节点访问方式,并且可以通过增删节点来灵活地调整链表的长度.作为一种常用的数据结构,链表内置在很多高级编程语言里面.既比数组复杂又比树简单,所以链表经常被面试官 ...

  3. Jenkins+Github持续环境搭建

    ⒈前提要求 Jenkins与Github配合实现持续集成需要注意以下几点: 1.Jenkins需要部署在外网上,因为内网地址是无法访问Github的.这一点可以通过租用阿里云.腾讯云等云平台提供的云服 ...

  4. 2018-2019 ACM-ICPC Southeastern European Regional Programming Contest (SEERC 2018)

    layout: post title: 2018-2019 ACM-ICPC Southeastern European Regional Programming Contest (SEERC 201 ...

  5. selenium登录豆瓣网

    登录流程: 实例化一个driver,然后driver.get()发送请求 最重要的:切换iframe子框架,因为豆瓣的网页中的登录那部分是一个ifrme,必须切换才能寻找到对应元素 利用seleniu ...

  6. Thinkphp+Ajax带关键词搜索列表无刷新分页实例

    Thinkphp+Ajax带关键词搜索列表无刷新分页实例,两个查询条件,分页和搜索关键字,懂的朋友还可以添加其他分页参数. 搜索#keyword和加载内容区域#ajax_lists <input ...

  7. django form组件 cookies,session

    django form组件 渲染标签  就是组件里面的字段在前端展示叫做渲染标签 校验数据  用户输入的数据提交给后端组件叫做校验数据 forms组件中定义的字段都是必须传值的(required=Tr ...

  8. Jmeter之TCP取样器(模拟数据上报压测)

    TCP压测 场景:模拟硬件设备上报数据(登录,心跳,GPS定位数据/光感数据/电量数据),对这个功能进行压测 啰嗦一句:TCP压测很简单,只要调通了一个TCP,后续的逻辑判断就用逻辑控制器和正则处理就 ...

  9. 安装consul-client+registrator

    安装registrator 下载镜像这里必须要注意:registrator的lastest版本已经2年没更新了,他的最新主板本是master,一定要注意,因为旧的版本无法发现跟自己不是同一个网络的容器 ...

  10. Spring实战(七)Bean 的作用域

    1.Spring中bean 的多种作用域 单例(Singleton):整个应用中只创建一个bean 的实例,Spring默认创建单例的bean: 原型(Prototype):每次注入or通过Sprin ...