数据管理必看!Kendo UI for jQuery过滤器状态保持
2019-11-14 18:05
2091 查看
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>
相关文章推荐
- substitution控件:在页面输出缓存状态,保持部分数据的动态更新
- 无刷新填充数据时清除elementUI的elTable排序状态的className
- jquery-ui datepicker日历的灵活运用日期背景色定义,选择日期显示数据
- DT大数据 86 for生成器过滤器
- JQuery Easy Ui dataGrid 数据表格
- 使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
- JQuery Easy Ui dataGrid 数据表格
- c#-MVC基础操作-数据的展示及增删改、登录页面及状态保持
- 微信小程序----------保持登录状态访问后台数据
- jquery - easy - ui 下的tree (动态加载数据)
- 集成 Kendo UI for Angular 2 控件
- Vue.js数据状态管理-Vuex(二)
- 使用ComponentArt.WebUI.for.Asp.net.3.0的TreeView控件实现数据驱动的无限级分类管理[图文教程]
- jQuery MiniUI开发系列之:UI和数据分离
- gridview的更新和取消的问题。网上有人问我说数据在update后还保持编辑的状态。怎么改变起状态。
- iOS开发那些事--iOS6 UI状态保持和恢复
- 基于jquery的kendoUI 可以实现快速开发,节省大量web UI开发工作量
- JQuery Easy Ui dataGrid 数据表格