jQuery EasyUI 数据网格 - 添加查询（搜索）功能-育师

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

<tableid="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><thfield="id"width="80"sortable="true">ID</th><thfield="username"width="100">用户名</th><thfield="name"width="100">姓名</th><thfield="email"width="180">邮箱</th><thfield="phone"width="120">电话</th><thfield="regdate"width="100"sortable="true">注册日期</th></tr></thead></table><!-- 工具栏 --><divid="toolbar"><divstyle="padding:5px;">用户名:<inputid="search_username"class="easyui-textbox"style="width:150px;">姓名:<inputid="search_name"class="easyui-textbox"style="width:150px;">注册日期从:<inputid="search_startdate"class="easyui-datebox"style="width:120px;">到:<inputid="search_enddate"class="easyui-datebox"style="width:120px;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-search"onclick="doSearch()">查询</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-reload"onclick="clearSearch()">重置</a></div></div>

步骤 2: 配置工具栏和 JavaScript 查询逻辑

<scripttype="text/javascript">$(function(){$('#dg').datagrid({toolbar:'#toolbar',// 指定工具栏singleSelect:true});});// 执行查询functiondoSearch(){$('#dg').datagrid('load',{username:$('#search_username').val(),name:$('#search_name').val(),startdate:$('#search_startdate').datebox('getValue'),// YYYY-MM-DD 格式enddate:$('#search_enddate').datebox('getValue')});}// 重置搜索条件functionclearSearch(){$('#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);echojson_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();}}})});