Web UI开发神器—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 Grid过滤功能处于禁用状态。要控制Grid中的过滤,请使用filterable属性。
Grid使您可以实现以下过滤器选项:
- 标题行过滤
- 通过复选框过滤
- 自定义菜单过滤
标题行过滤
要启用网格标题中的过滤器行,请将模式设置为row。结果基于基础列数据的数据类型,网格将在列标题中呈现字符串值、数字输入或日期选择器的文本框进行过滤。您还可以指定默认的过滤器运算符,当用户在过滤器文本框中输入值并从键盘按Enter或Tab时将应用该默认过滤器。 要处理这种情况,请将相应列的cell设置为operator。
<!DOCTYPE html>
<html>
<head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
},
height: 550,
filterable: {
mode: "row"
},
pageable: true,
columns:
[{
field: "OrderID",
width: 225,
filterable: {
cell: {
showOperators: false
}
}
},
{
field: "ShipName",
width: 500,
title: "Ship Name",
filterable: {
cell: {
operator: "contains",
suggestionOperator: "contains"
}
}
},{
field: "Freight",
width: 255,
filterable: {
cell: {
operator: "gte"
}
}
},{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}]
});
});
</script>
</div>
</body>
</html>
通过复选框过滤
要在过滤器菜单中呈现复选框列表,请为所需的Grid列设置multi=true,还可以将复选框过滤器与itemTemplate定义结合使用,并自定义将显示的复选框项目。
<!DOCTYPE html>
<html>
<head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<style>
.k-multicheck-wrap {
overflow-x: hidden;
}
</style>
<div class="demo-section k-content wide">
<h4>Client Operations</h4>
<div id="client"></div>
</div>
<div class="demo-section k-content wide">
<h4>Server Operations</h4>
<div id="server"></div>
</div>
<script>
$(document).ready(function() {
var telerikWebServiceBase = "https://demos.telerik.com/kendo-ui/service/";
$("#client").kendoGrid({
dataSource: {
transport: {
read: {
url: telerikWebServiceBase + "/Products",
dataType: "jsonp"
},
update: {
url: telerikWebServiceBase + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: telerikWebServiceBase + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: telerikWebServiceBase + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
},
filterable: true,
pageable: true,
height: 550,
toolbar: ["create", "save", "cancel"],
columns: [
{ field: "ProductName", filterable: { multi: true, search: true} },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120, filterable: { multi: true } },
{ field: "UnitsInStock", title: "Units In Stock", width: 120, filterable: { multi: true } },
{ field: "Discontinued", width: 120, filterable: { multi: true, dataSource: [{ Discontinued: true }, { Discontinued: false }]} },
{ command: "destroy", title: " ", width: 150}],
editable: true
});
$("#server").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: telerikWebServiceBase + "Northwind.svc/Employees"
},
pageSize: 20,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
},
editable: true,
filterable: true,
pageable: true,
columns: [
{
field: "FirstName",
title: "First Name",
filterable: {
multi: true ,
//when serverPaging of the Grid is enabled, dataSource should be provided for all the Filterable Multi Check widgets
dataSource: {
transport: {
read: {
url: telerikWebServiceBase + "Employees/Unique",
dataType: "jsonp",
data: {
field: "FirstName"
}
}
}
}
},
width: "220px"
},
{
field: "LastName",
filterable: {
dataSource: {
transport: {
read: {
url: telerikWebServiceBase + "Employees/Unique",
dataType: "jsonp",
data: {
field: "LastName"
}
}
}
},
multi: true
},
title: "Last Name",
width: "220px"
},
{
field: "Country",
filterable: {
multi: true,
dataSource: {
transport: {
read: {
url: telerikWebServiceBase + "Employees/Unique",
dataType: "jsonp",
data: {
field: "Country"
}
}
}
},
itemTemplate: function(e) {
if (e.field == "all") {
//handle the check-all checkbox template
return "<div><label><strong><input type='checkbox' />#= all#</strong></label></div>";
} else {
//handle the other checkboxes
return "<span><label><input type='checkbox' name='" + e.field + "' value='#=Country#'/><span>#= Country #</span></label></span>"
}
}
},
width: "220px"
},
{
field: "City",
filterable: {
multi: true,
dataSource: [{
City: "Seattle",
},{
City: "Tacoma",
},{
City: "Kirkland",
},{
City: "Redmond",
},{
City: "London"
}],
checkAll: false
},
width: "220px"
},
{
filterable: {
multi: true,
dataSource: {
transport: {
read: {
url: telerikWebServiceBase + "Employees/Unique",
dataType: "jsonp",
data: {
field: "Title"
}
}
}
}
},
field: "Title"
}
]
});
});
</script>
</div>
</body>
</html>
自定义菜单过滤
您可以为网格过滤器的菜单配置应用通用设置,并在每列中自定义其UI。有关实现自定义菜单筛选的可运行示例演示了如何:
- 通过设置extra = false来指定单个过滤条件;
- 将字符串列的过滤器运算符限制为仅、等于和不等于开始;
- 定义内置的日期选择器用户界面,以过滤网格中的日期时间列;
- 分别为Title和City列实例化Kendo UI AutoComplete和DropDownList。
<!DOCTYPE html>
<html>
<head><title></title><link rel="stylesheet" href="styles/kendo.common.min.css" /><link rel="stylesheet" href="styles/kendo.default.min.css" /><link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/people.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: createRandomData(50),
schema: {
model: {
fields: {
City: { type: "string" },
Title: { type: "string" },
BirthDate: { type: "date" }
}
}
},
pageSize: 15
},
height: 550,
scrollable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
pageable: true,
columns: [
{
title: "Name",
width: 160,
filterable: false,
template: "#=FirstName# #=LastName#"
},
{
field: "City",
width: 130,
filterable: {
ui: cityFilter
}
},
{
field: "Title",
filterable: {
ui: titleFilter
}
},
{
field: "BirthDate",
title: "Birth Date",
format: "{0:MM/dd/yyyy HH:mm tt}",
filterable: {
ui: "datetimepicker"
}
}
]
});
});
function titleFilter(element) {
element.kendoAutoComplete({
dataSource: titles
});
}
function cityFilter(element) {
element.kendoDropDownList({
dataSource: cities,
optionLabel: "--Select Value--"
});
}
</script>
</div>
</body>
</html>
了解最新Kendo UI最新资讯,请关注Telerik中文网!
扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯
Web UI开发神器—Kendo UI for jQuery数据管理之过滤操作的更多相关文章
- Web UI开发神器—Kendo UI for jQuery数据管理网格编辑操作
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- [置顶] Kendo UI开发教程: Kendo UI 示例及总结
前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...
- HTML5 Web app开发工具Kendo UI Web中如何绑定网格到远程数据
在前面的文章中对于Kendo UI中的Grid控件的一些基础的配置和使用做了一些介绍,本文来看看如何将Kendo UI 中的Grid网格控件绑定到远程数据. 众所周知Grid网格控件是用户界面的一个重 ...
- HTML5 Web app开发工具Kendo UI Web中Grid网格控件的使用
Kendo UI Web中的Grid控件不仅可以显示数据,并对数据提供了丰富的支持,包括分页.排序.分组.选择等,同时还有着大量的配置选项.使用Kendo DataSource组件,可以绑定到本地的J ...
- Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版
WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗 ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十八】
<Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十】
<Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十九】
<Web 前端开发精华文章推荐>2013年第七期(总第十九期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
随机推荐
- Razor 保存动态表格
本文转载自 ASP.NET MVC数组模型绑定 ,https://www.cnblogs.com/choon/p/5429065.html 内容根据评论内容中的方式有所调整 在ASP.NET MVC ...
- go语言从例子开始之Example14.变参函数
可变参数函数.可以用任意数量的参数调用.例如,fmt.Println 是一个常见的变参函数. Example: package main import "fmt" //...int ...
- 在eclipse中添加svn插件
1.点击菜单栏中的help选项,然后选择Install New Software,然后点击ADD,输入: name:subclipse url:http://subclipse.tigris. ...
- Codeforces 669E cdq分治
题意:你需要维护一个multiset,支持以下操作: 1:在某个时间点向multiset插入一个数. 2:在某个时间点在multiset中删除一个数. 3:在某个时间点查询multiset的某个数的个 ...
- pod的状态分析
Pod状态 状态 描述 Running 该 Pod 已经绑定到了一个节点上,Pod 中所有的容器都已被创建.至少有一个容器正在运行,或者正处于启动或重启状态. Pending Pod 已被 Kuber ...
- Myeclipse 崩溃闪退 Java was started but returned exit code =-1
出现如上图所述情况的原因可能是因为虚拟机jdk和myEclipse配置文件中的vm地址发生冲突报出的错误 第一种解决办法:只需要将你jdk文件下的bin目录下的javaw.exe文件的全部路径复制到M ...
- java解决高并发问题
对于我们开发的网站,如果网站的访问量非常大的话,那么我们就需要考虑相关的并发访问问题了.而并发问题是绝大部分的程序员头疼的问题, 但话又说回来了,既然逃避不掉,那我们就坦然面对吧~今天就让我们一起来研 ...
- Hashtable、HashMap、TreeMap、ConcurrentHashMap、ConcurrentSkipListMap区别
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11444013.html 并发场景下的Map容器使用场景 如果对数据有强一致要求,则需使用Hashtab ...
- vue 前后端分离 接口及result规范 及drf安装使用方法
接口 # 接口:url链接,通过向链接发送不同的类型请求与参数得到相应的响应数据# 1.在视图层书写处理请求的 视图函数# 2.在路由层为视图函数配置 url链接 => 产生接口# 3.前台通 ...
- chroot()使用
好多的程序,都有使用chroot来是程序chroot到一个目录下面,来保护文件系统,今天在看snort代码的时候,看到了实现,就贴出一个测试程序来,实际上是比较简单的. chroot()在lin ...