<think>我们
使用EasyUI的
datagrid-filter插件来实现表头筛选功能。根据用户需求，我们将按照以下步骤进行：
1
. 引入必要的文件（包括jQuery、
EasyUI核心文件以及
datagrid-filter插件文件）
2
. 在
datagrid的列配置中为需要筛选的列添加
filter属性
3
. 配置
datagrid的
filter相关属性，如
filterRules（初始筛选规则）、
filterDelay（输入延迟）、remote
Filter（是否远程筛选）等
4
. 如果需要清除筛选，可以
使用提供的方法
下面是一个具体的示例代码：
### 步骤1：引入文件
```html
<!
-- 引入jQuery
-->
<script src="https://code
.jquery
.com/jquery
-3
.6
.0
.min
.js"></script>
<!
-- 引入
EasyUI核心CSS和
JS -->
<link rel="stylesheet" type="text/css" href="https://www
.j
easyui.com/
easyui/themes/default/
easyui.css">
<script type="text/javascript" src="https://www
.j
easyui.com/
easyui/jquery
.easyui.min
.js"></script>
<!
-- 引入
datagrid-filter插件
-->
<script type="text/javascript" src="https://www
.j
easyui.com/
easyui/
datagrid-filter.js"></script>
```
### 步骤2：HTML结构
```html
<table id="dg" style="width:100%;height:500px"></table>
```
### 步骤3：JavaScript初始化
datagrid
```javascript
$(function() {
$('#dg')
.datagrid({
url: 'data
.json', // 数据源URL
rownumbers: true,
singleSelect: true,
pagination: true,
pageSize: 10,
pageList: [10, 20, 30],
// 配置筛选相关属性
filterDelay: 500, // 输入延迟500毫秒后触发筛选
remote
Filter: true, //
使用远程筛选，即发送请求到服务器
// 初始筛选规则（可选）
filterRules: [],
// 列配置
columns: [[
{ field: 'id', title: 'ID', width: 80, sortable: true },
{
field: 'name',
title: '名称',
width: 100,
// 配置筛选器
filter: {
type: 'textbox', // 文本
框类型
options: {
prompt: '输入名称
...' // 提示文本
}
}
},
{
field: 'price',
title: '价格',
width: 100,
align: 'right',
filter: {
type: 'numberbox', // 数字
框
options: {
min: 0, // 最小值
precision: 2, // 小数点精度
prompt: '输入价格
...'
}
}
},
{
field: 'status',
title: '状态',
width: 100,
filter: {
type: 'combobox', // 下拉
框
options: {
prompt: '选择状态
...',
valueField: 'value',
textField: 'text',
data: [ // 本地数据
{ value: 'active', text: '启用' },
{ value: 'inactive', text: '停用' }
],
panelHeight: 'auto'
}
}
},
{
field: 'createDate',
title: '创建日期',
width: 120,
filter: {
type: 'datebox', // 日期选择
框
options: {
prompt: '选择日期
...'
}
}
}
]]
});
});
```
### 步骤4：清除筛选
如果需要清除筛选，可以调用以下方法：
```javascript
// 清除所有筛选
$('#dg')
.datagrid('clear
Filter');
// 清除特定列的筛选（例如清除name列的筛选）
$('#dg')
.datagrid('remove
FilterRule', 'name');
```
### 后端处理（远程筛选）
当`remote
Filter: true`时，
datagrid会向服务器发送一个包含筛选规则的参数`
filter`，格式为
JSON字符串。例如：
```
json
{
"rules": [
{ "field": "name", "op": "contains", "value": "手机" },
{ "field": "price", "op": "less", "value": 1000 },
{ "field": "status", "op": "equal", "value": "active" }
]
}
```
后端需要解析这个
JSON，并将其转换为SQL查询条件（或其他数据库查询条件）。例如，对于上面的规则，可以生成：
```sql
WHERE name LIKE '%手机%' AND price < 1000 AND status = 'active'
```
### 注意事项
1
. **表头换行问题**：如果表头标题需要换行，可以在`title`属性中
使用`<br/>`标签，如`title: '是否为<br/>机构内人员'`[^1]。
2
. **表头与数据错位问题**：如果出现错位，可以尝试刷新表格（`$('#dg')
.datagrid('resize');`）或者检查CSS样式。另外，注意字段名中不要包含特殊字符，如空格、点号等，或者进行转义处理[^3]。
3
. **排序问题**：如果需要自定义排序，可以设置列的`sorter`属性为一个函数[^2]。
### 示例效果
- 表头将显示筛选输入
框（文本
框、数字
框、下拉
框、日期选择
框等）
- 输入筛选条件后，经过设定的延迟（500毫秒）将自动发送请求到服务器（如果配置了远程筛选）
- 筛选条件会以`
filter`参数的形式发送到服务器
### 相关问题
1
. 如何实现远程筛选的后端处理？
2
. 如何自定义筛选控件（比如
使用范围筛选）？
3
. 如何在表头同时支持换行和筛选功能？
4
. 如何保存和恢复用户的筛选条件？
### 引用说明
- 表头换行可以通过在`title`属性中
使用`<br/>`标签实现[^1]。
- 排序功能可以通过设置列的`sortable`属性以及自定义`sorter`函数实现[^2]。
- 表头与数据错位问题可能需要处理字段名中的特殊字符[^3]。</think>### 在
EasyUI DataGrid 表头添加筛选功能（
使用 datagrid-filter 插件）
以下是
使用 `
datagrid-filter` 插件实现表头筛选的完整步骤：
#### 步骤 1：引入必要文件
```html
<!
-- 核心文件
-->
<link rel="stylesheet" type="text/css" href="https://www
.j
easyui.com/
easyui/themes/default/
easyui.css">
<script src="https://code
.jquery
.com/jquery
-3
.6
.0
.min
.js"></script>
<script src="https://www
.j
easyui.com/
easyui/jquery
.easyui.min
.js"></script>
<!
-- datagrid-filter 插件
-->
<script src="https://www
.j
easyui.com/
easyui/
datagrid-filter.js"></script>
```
#### 步骤 2：HTML 结构
```html
<table id="dg" style="width:100%;height:500px"></table>
```
#### 步骤 3：JavaScript 初始化
```javascript
$(function(){
$('#dg')
.datagrid({
url: 'data
.json', // 数据源URL
rownumbers: true,
singleSelect: true,
pagination: true,
pageSize: 10,
pageList: [10, 20, 30],
// 筛选核心配置
filterDelay: 500, // 输入延迟500毫秒后触发筛选
remote
Filter: true, //
使用远程筛选（发送到服务器）
filterRules: [], // 初始筛选规则
columns: [[
{ field: 'id', title: 'ID', width: 80, sortable: true },
{
field: 'name',
title: '产品名称',
width: 150,
// 文本筛选
框
filter: {
type: 'textbox',
options: {
prompt: '输入产品名称
...' // 输入提示
}
}
},
{
field: 'category',
title: '产品类别',
width: 120,
// 下拉筛选
框
filter: {
type: 'combobox',
options: {
prompt: '选择类别
...',
valueField: 'id',
textField: 'text',
url: 'categories
.json', // 远程数据源
panelHeight: 'auto'
}
}
},
{
field: 'price',
title: '价格',
width: 100,
align: 'right',
// 数字筛选
框
filter: {
type: 'numberbox',
options: {
min: 0,
precision: 2,
prompt: '输入价格
...'
}
}
},
{
field: 'status',
title: '状态',
width: 100,
// 带本地数据的下拉
框
filter: {
type: 'combobox',
options: {
prompt: '选择状态
...',
valueField: 'value',
textField: 'text',
data: [ // 本地数据
{ value: 1, text: '上架' },
{ value: 0, text: '下架' }
],
panelHeight: 'auto'
}
}
},
{
field: 'createDate',
title: '创建日期',
width: 120,
// 日期筛选
框
filter: {
type: 'datebox',
options: {
prompt: '选择日期
...'
}
}
}
]]
});
});
```
#### 步骤 4：表头换行处理（如需要）
若需在带筛选功能的表头中换行：
```javascript
{
field: 'isInclude',
title: '是否为<br/>机构内人员', //
使用<br/>换行
align: "center",
width: 100,
filter: {
type: 'combobox',
options: {
data: [
{ value: 0, text: '是' },
{ value: 1, text: '否' }
]
}
}
}
```
#### 步骤 5：筛选操作控制
```javascript
// 获取当前筛选规则
const rules = $('#dg')
.datagrid('get
FilterRules');
console
.log(rules);
// 清除所有筛选
$('#btnClear')
.click(function(){
$('#dg')
.datagrid('clear
Filter');
});
// 清除特定字段筛选
$('#btnClearName')
.click(function(){
$('#dg')
.datagrid('remove
FilterRule', 'name');
});
// 添加自定义筛选规则
$('#btnAddRule')
.click(function(){
$('#dg')
.datagrid('add
FilterRule', {
field: 'price',
op: 'greater',
value: 100
});
});
```
#### 后端处理示例（PHP）
```php
// 获取
EasyUI发送的筛选参数
$
filter =
json_decode($_POST['
filter'], true);
$where = [];
foreach($
filter['rules'] as $rule) {
switch($rule['op']) {
case 'contains':
$where[] = "{$rule['field']} LIKE '%{$rule['value']}%'";
break;
case 'equal':
$where[] = "{$rule['field']} = '{$rule['value']}'";
break;
case 'less':
$where[] = "{$rule['field']} < {$rule['value']}";
break;
// 其他操作符
...
}
}
$sql = "SELECT * FROM products";
if(count($where) > 0) {
$sql
.= " WHERE "
. implode(' AND ', $where);
}
```
### 关键配置说明
| 属性 | 类型 | 说明 |
|
------|
------|
------|
| `
filter.type` | string | 控件类型：`textbox`/`numberbox`/`combobox`/`datebox` |
| `
filter.options` | object | 控件配置选项（与
EasyUI原控件一致） |
| `remote
Filter` | boolean | `true`时发送筛选参数到服务器 |
| `
filterDelay` | number | 输入延迟（毫秒），减少频繁请求 |
| `
filterRules` | array | 初始筛选规则数组 |
### 常见问题解决
1
. **表头错位问题**：
```javascript
// 在窗口大小变化时刷新表格
$(window)
.resize(function(){
$('#dg')
.datagrid('resize');
});
```
如果字段名包含特殊字符，建议进行转义处理[^3]：
```javascript
field: fieldName
.replace(/[\
.|\s]/g, "
-")
```
2
. **自定义筛选类型**：
```javascript
filter: {
type: 'combobox',
options: {
data: [
{ value: 'high', text: '高优先级' },
{ value: 'normal', text: '普通优先级' }
],
onSelect: function(record){
// 自定义选择处理
}
}
}
```
3
. **保存筛选状态**：
```javascript
// 保存状态
localStorage
.setItem('
filterRules',
JSON
.stringify($('#dg')
.datagrid('get
FilterRules')));
// 初始化时还原
$('#dg')
.datagrid({
filterRules:
JSON
.parse(localStorage
.getItem('
filterRules') || '[]')
});
```
### 相关问题
1
. 如何实现日期范围筛选？
2
. 如何在远程筛选时处理分页参数？
3
. 如何自定义筛选操作符（如"包含任意一个"）？
4
. 表头同时支持换行和筛选时如何避免样式错乱？[^1]
5
. 如何实现多列组合筛选（AND/OR逻辑）？
本文介绍如何使用EasyUI DataGrid插件中的过滤功能，通过添加combobox类型的过滤器实现对DataGrid中'salaryType'和'payStatus'字段的动态过滤，并详细展示了如何根据选择值实时更新过滤条件。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
