kendo ui列表筛选、过滤功能

最新推荐文章于 2023-02-08 09:44:04 发布

鱼七喵

最新推荐文章于 2023-02-08 09:44:04 发布

阅读量1k

点赞数 1

分类专栏：代码 KendoUI 文章标签： js html

本文链接：https://blog.csdn.net/qq_34113011/article/details/107857245

版权

代码同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

KendoUI

1 篇文章 0 订阅

订阅专栏

kendo ui列表筛选、过滤功能

 *
 目前发现了三种列表筛选的办法、此篇说的是在列表上面显示的输入框进行筛选过滤filterable
 *

代码块（用到的js、css会在下面附上）

<!-- html -->
<!DOCTYPE html>
<html>
<head>
    <title>Filter row</title>
    <meta charset="utf-8">
    <link href="css/examples-offline.css" rel="stylesheet">
    <link href="css/kendo.common.min.css" rel="stylesheet">
    <link href="css/kendo.rtl.min.css" rel="stylesheet">
    <link href="css/kendo.default.min.css" rel="stylesheet">
    <link href="css/kendo.dataviz.min.css" rel="stylesheet">
    <link href="css/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <!-- 转义为中文js -->
    <script src="js/kendo.culture.zh-CN.min.js"></script>
    <script src="js/kendo.messages.zh-CN.min.js"></script>
    <script src="content/shared/js/console.js"></script>
</head>

<body>
	<a class="offline-button" href="../index.html">Back</a>
	<div id="example">
		<div id="grid"></div>
	</div>
</body>
</html>

	//js
	//代码中有注释
	$(document).ready(function() {
		$("#grid").kendoGrid({
			dataSource: {
				type: "odata",
				transport: {
					read: "刷新数据的地址"
					//read:"http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"(官方地址)
				},
				schema: {
					model: {
						fields: {
							OrderID: { 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: {//可写成filterable：false（这样是不展示输入框的）
					cell: {
						showOperators: false//不显示筛选框后面的调节筛选类型按钮
					}
				}
			}, {
				field: "ShipName",
				width: 500,
				title: "Ship Name",
				filterable: {
					cell: {
						operator: "contains"//“包含”筛选类型按钮
					}
				}
			}, {
				field: "Freight",
				width: 255,
				filterable: {
					cell: {
						operator: "gte"//“大于等于”筛选类型按钮
					}
				}
			}, {
				field: "OrderDate",
				title: "Order Date",
				format: "{0:MM/dd/yyyy}"//时间格式
			}]
		});
	});

数据展示

在这里插入图片描述

在这里说明，此形势不是唯一的展示列表形势，可根据现实功能灵活运用。

例如加载本地数据

	//加载本地数据

	var codeData = new Array();
	codeData[0]=({code:"001"});
	codeData[1]=({code:"002"});
	codeData[2]=({code:"003"});
	codeData[3]=({code:"004"});
	
	var columns = new Array({
		field : "code",
		title : "代码",
		width:120,
		filterable: {
            cell: {
                showOperators: false
            }
        }
	});
	var gridCompanyCode = $("#grid").kendoGrid({
		dataSource :{
			transport: {
				read: function(operation) {
					var data = codeData|| [];
					operation.success(data);
				}
			}
		},
		resizable: true,
		selectable: "row",
		height: 550,
		sortable: false,
		columns :columns,
		editable : "popup",
		filterable: {
            mode: "row"
        }
	}).data("kendoGrid");
	gridCompanyCode.dataSource.read({ data: codeData });

用到的文件

链接: 文件地址百度云提取码：u53y

总结：

目前发现的三种形势，感觉这种形式更简便一些。

1、第一种直接外部写input进行筛选

2、在列表上出现筛选功能箭头，点击后进行添加数据（页面调整不好的话会出现，页面串行的情况）

3、在列表上部分，列表名称下部分出现的输入框进行筛选（此篇文章讲述的）

== 如有写的错的地方，书写格式的问题，希望多提建议，大家彼此一起成长 ==

鱼七喵

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
kendo ui列表筛选、过滤功能

kendo ui列表筛选、过滤功能目前发现了三种列表筛选的办法、此篇说的是在列表上面显示的输入框进行筛选过滤filterable代码块（用到的js、css会在下面附上）<!DOCTYPE html><html><head> <title>Filter row</title> <meta charset="utf-8"> <link href="css/ex
复制链接

扫一扫