jQuery EasyUI 数据网格 – 添加查询（搜索）功能
为 datagrid 添加查询功能是实际应用中最常见的需求之一。EasyUI 官方没有内置统一的搜索框，但可以通过以下几种方式轻松实现：
- 工具栏（toolbar）搜索框 + 手动查询（最常用、灵活）
- 内置搜索框扩展（使用 datagrid 的 load 参数过滤）
本教程重点介绍第一种方式：在工具栏添加搜索框和按钮，点击“查询”后向服务器传递参数重新加载数据。
官方参考：
- 带搜索的 DataGrid 示例：https://www.jeasyui.com/tutorial/datagrid/datagrid23.php
- 在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=Client+Pagination
步骤 1: 创建带工具栏的 DataGrid
<table id="dg" class="easyui-datagrid" title="用户管理" style="width:800px;height:500px"
data-options="url:'get_users.php',fitColumns:true,pagination:true,rownumbers:true,pageSize:10">
<thead>
<tr>
<th field="id" width="80" sortable="true">ID</th>
<th field="username" width="100">用户名</th>
<th field="name" width="100">姓名</th>
<th field="email" width="180">邮箱</th>
<th field="phone" width="120">电话</th>
<th field="regdate" width="100" sortable="true">注册日期</th>
</tr>
</thead>
</table>
<!-- 工具栏 -->
<div id="toolbar">
<div style="padding:5px;">
用户名: <input id="search_username" class="easyui-textbox" style="width:150px;">
姓名: <input id="search_name" class="easyui-textbox" style="width:150px;">
注册日期从: <input id="search_startdate" class="easyui-datebox" style="width:120px;">
到: <input id="search_enddate" class="easyui-datebox" style="width:120px;">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" onclick="doSearch()">查询</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="clearSearch()">重置</a>
</div>
</div>步骤 2: 配置工具栏和 JavaScript 查询逻辑
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
toolbar: '#toolbar', // 指定工具栏
singleSelect: true
});
});
// 执行查询
function doSearch(){
$('#dg').datagrid('load', {
username: $('#search_username').val(),
name: $('#search_name').val(),
startdate: $('#search_startdate').datebox('getValue'), // YYYY-MM-DD 格式
enddate: $('#search_enddate').datebox('getValue')
});
}
// 重置搜索条件
function clearSearch(){
$('#search_username').textbox('clear');
$('#search_name').textbox('clear');
$('#search_startdate').datebox('clear');
$('#search_enddate').datebox('clear');
// 重新加载原始数据（无参数）
$('#dg').datagrid('load', {});
}
</script>步骤 3: 后端 PHP 示例（get_users.php）
服务器端接收参数并在 SQL 中使用（注意防注入）：
<?php
// get_users.php
$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$offset = ($page-1)*$rows;
$where = " WHERE 1=1 ";
$params = [];
// 查询条件
if (!empty($_POST['username'])) {
$where .= " AND username LIKE ?";
$params[] = '%'.$_POST['username'].'%';
}
if (!empty($_POST['name'])) {
$where .= " AND name LIKE ?";
$params[] = '%'.$_POST['name'].'%';
}
if (!empty($_POST['startdate'])) {
$where .= " AND regdate >= ?";
$params[] = $_POST['startdate'];
}
if (!empty($_POST['enddate'])) {
$where .= " AND regdate <= ?";
$params[] = $_POST['enddate'];
}
// 查询总数
$count_sql = "SELECT COUNT(*) AS total FROM users" . $where;
$stmt = $pdo->prepare($count_sql);
$stmt->execute($params);
$total = $stmt->fetch()['total'];
// 查询数据
$sql = "SELECT * FROM users" . $where . " ORDER BY id DESC LIMIT $offset,$rows";
$stmt = $pdo->prepare($sql);
$stmt->execute($params);
$items = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode(['total'=>$total, 'rows'=>$items]);
?>完整效果
- 用户在工具栏输入条件 → 点击“查询” → datagrid 自动向
get_users.php传递参数 → 服务器返回过滤后的数据 + 分页 → 表格刷新显示结果。 - 点击“重置” → 清空条件并重新加载所有数据。
扩展功能
- 回车键查询：
$('#search_username,#search_name').textbox({
inputEvents: $.extend({}, $.fn.textbox.defaults.inputEvents, {
keyup: function(e){
if(e.keyCode == 13){
doSearch();
}
}
})
});- 高级搜索面板（可折叠）：
将搜索条件放入一个 panel 或 dialog，点击“高级搜索”展开。 - 客户端分页搜索（数据量小）：
使用clientPagination: true+ 本地数据，搜索时过滤 rows。
更多示例
- 官方搜索示例：https://www.jeasyui.com/tutorial/datagrid/datagrid23.php
- 复杂查询表单：https://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&pitem=SearchBox
如果需要高级搜索弹窗、模糊搜索自动完成、导出带查询条件的数据或其他高级查询功能，请继续提问！
