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

明白一个道理，百度上搜索半天搜不到的问题，不如自己去读一下官方文档。所以：
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="datagrid-filter.js"></script><style>.icon-filter{background:url('filter.png') no-repeat center center;}</style><script>var data = [{"productid":"FI-SW-01","productname":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},{"productid":"K9-DL-01","productname":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},{"productid":"RP-SN-01","productname":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"N","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},{"productid":"FL-DLH-02","productname":"Persian","unitcost":12.00,"status":"N","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},{"productid":"AV-CB-01","productname":"Amazon Parrot","unitcost":92.00,"status":"N","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}];$(function(){var dg = $('#dg').datagrid({filterBtnIconCls:'icon-filter'});dg.datagrid('enableFilter', [{field:'listprice',type:'numberbox',options:{precision:1},op:['equal','notequal','less','greater']},{field:'unitcost',type:'numberbox',options:{precision:1},op:['equal','notequal','less','greater']},{field:'status',type:'combobox',options:{panelHeight:'auto',data:[{value:'',text:'All'},{value:'P',text:'P'},{value:'N',text:'N'}],onChange:function(value){if (value == ''){dg.datagrid('removeFilterRule', 'status');} else {dg.datagrid('addFilterRule', {field: 'status',op: 'equal',value: value});}dg.datagrid('doFilter');}}}]);});</script>
</head>
<body><h1>DataGrid Filter Row</h1><table id="dg" title="DataGrid" style="width:700px;height:250px" data-options="singleSelect:true,data:data,remoteSort:false,"><thead><tr><th data-options="field:'itemid',width:80">Item ID</th><th data-options="field:'productid',width:100">Product</th><th data-options="field:'listprice',width:80,align:'right',sortable:true">List Price</th><th data-options="field:'unitcost',width:80,align:'right',sortable:true">Unit Cost</th><th data-options="field:'attr1',width:250">Attribute</th><th data-options="field:'status',width:60,align:'center'">Status</th></tr></thead></table>
</body>
</html>

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

jquery easyui DataGrid 数据表格属性
扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagin ...
easyui datagrid b表格中的内容显示null_扫盲 | 实际工作中，B 端设计都在做什么？...
上篇:扫盲 | 当说起B端设计时,我们在聊什么接下来,我们就要谈谈有关设计的问题了,因为 B 端产品服务的对象不同,所以它和 C 端的设计有一定的差异,下面来分析一下它们之间的区别. 需求特点: 对 ...
jquery easyui datagrid 更改表格标题，行间距和文字大小
<div id="table"><table id="order"></table> </div>$(" ...
React Table 表格组件使用教程排序、分页、搜索过滤筛选功能实战开发
React Table 表格组件使用教程 react-table 安装和使用 React Table 表格排序功能 React Table 表格搜索过滤筛选功能 React Table 表格分页功能 ...
Element Plus 虚拟化表格组件的使用(排序、筛选、自定义单元格渲染) - 个人使用总结
前言 element-plus@2.2.0 后提供虚拟化表格组件,解决表格数据过大导致的卡顿等性能问题.相对于表格组件,用法上区别还是挺大的,尤其是一些附加的功能,例如排序.筛选.自定义单元格/表头渲 ...
Easyui之Datagrid(数据表格)
Datagrid 前言 1.概念 2.常见使用案例 3.datagrid属性 4.datagrid事件 5.datagrid方法 6.案例演示 7.为什么使用datagrid 总结前言今天为大家分 ...
easyui—DataGrid（数据表格）
目录一.DataGrid(数据表格) 一.DataGrid(数据表格) DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.DataGrid的设计用于缩短开发时间 ...
easyui datagrid 多表头数据错位_表格数据检索（二）
企业级中后台产品通常大量使用表格来展示结构化的数据,对表格数据进行检索,是一个常用功能.在日常设计工作中,我们经常不加思考便产出一个个带有表格数据检索功能的页面.然而,体验良好的表格数据检索功能,需要 ...
jquery easyui dataGrid动态改变排序字段名
2019独角兽企业重金招聘Python工程师标准>>> jquery easyui dataGrid 动态改变排序字段名,一般情况下,在使用的时候,我们会点击相应字段进行排序, 这里 ...

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

一、实现DataGrid表格排序

二、数据筛选

附：源码

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

最新文章

热门文章