【EasyUI】DataGrid实现表格的筛选过滤、排序

最新推荐文章于 2023-06-21 17:38:18 发布

寒泉Hq

最新推荐文章于 2023-06-21 17:38:18 发布

阅读量3.6w

点赞数 2

分类专栏： HTML+CSS+JS

本文链接：https://blog.csdn.net/sinat_42483341/article/details/103225524

版权

明白一个道理，百度上搜索半天搜不到的问题，不如自己去读一下官方文档。所以：
EasyUI官方文档 - DataGrid文档

源码在文末，先放上效果：
在这里插入图片描述

一、实现DataGrid表格排序

下图来自官方文档
在这里插入图片描述
如果不需要自定义排序,可以直接使用

    remoteSort:false,  
    sortName:'',  
    sortOrder:'asc',

一些特殊排序，或者指定某个字段的排序 / 自定义排序规则，可以使用以下的方法：

将服务器对数据项排序设置为false（注意，必须）
设置field的排序属性为true

到这里就已经可以了。
如果还需要自定义排序方式的话，sorter的function内容可以自己写。如果该字段为数字或者字符串，可以用以下方法：参考这个博客

在这里插入图片描述

二、数据筛选

使用EasyUI拓展，可查看：官方文档 - EasyUI 数据网格行过滤（DataGrid Filter Row），这个拓展是需要下载额外的js文件的，官网有提供，最后别忘了在页面引用一下js文件。

在表头实现根据某一列的属性值筛选，下拉单选框使用的是以下参数选项combobox。除此之外，还有其它选项，可以试一试。
在这里插入图片描述
使用方式：

效果：

附：源码

来源：官方示例+稍微修改

1、文件结构
在这里插入图片描述
2、datagrid-filter.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src

最低0.47元/天解锁文章