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微信公众号，及时获取最新动态及最新资讯
