当前位置: 首页
前端开发
jQuery EasyUI DataGrid 添加查询功能完整教程

jQuery EasyUI DataGrid 添加查询功能完整教程

时间:2026-08-31
转载

本文演示如何在 jQuery EasyUI DataGrid 中实现基于用户输入的查询功能。通过前端工具栏、JS 查询函数与后端 PHP 代码的配合,完成数据过滤与分页加载,并提供安全与兼容性优化建议。

在 jQuery EasyUI 项目中,DataGrid 常用于展示数据库数据并支持分页。当需要根据用户输入动态过滤结果时,可通过工具栏收集参数、调用 load 方法刷新数据,并在服务端执行条件查询。本文将完整演示前后端实现步骤,并指出关键安全与兼容性注意事项。

创建带工具栏的 DataGrid

首先初始化一个支持分页的 DataGrid,并通过 toolbar 属性绑定外部工具栏容器。表格列定义包含 Item ID、Product ID、List Price、Unit Cost、Attribute 和 Status 字段,数据源指向 datagrid24_getdata.php。

Item ID Product ID List Price Unit Cost Attribute Stauts

工具栏包含两个输入框和一个查询按钮,用于接收用户输入的 Item ID 和 Product ID 关键词。

Item ID: Product ID: Search

jQuery EasyUI DataGrid 查询功能界面

当用户点击 Search 按钮时,触发 doSearch 函数。该函数通过 jQuery 获取输入框的值,并调用 DataGrid 的 load 方法重新请求数据。load 方法会将传入的对象作为 POST 参数发送至 url 指定的接口。

function doSearch(){
    $('#tt').datagrid('load',{
        itemid: $('#itemid').val(),
        productid: $('#productid').val()
    });
}

此机制确保每次查询都会重置分页至第一页,并携带最新的过滤条件。若需保留当前页码或添加额外参数,可在对象中追加对应键值。

服务端查询与分页实现

服务端接收 page、rows、itemid 和 productid 四个参数,构建 LIKE 条件进行模糊匹配,并返回符合 EasyUI DataGrid 要求的 JSON 结构(包含 total 和 rows 字段)。

include 'conn.php';

$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
$itemid = isset($_POST['itemid']) ? mysql_real_escape_string($_POST['itemid']) : '';
$productid = isset($_POST['productid']) ? mysql_real_escape_string($_POST['productid']) : '';

$offset = ($page-1)*$rows;

$result = array();

$where = "itemid like '$itemid%' and productid like '$productid%'";
$rs = mysql_query("select count(*) from item where " . $where);
$row = mysql_fetch_row($rs);
$result["total"] = $row[0];

$rs = mysql_query("select * from item where " . $where . " limit $offset,$rows");

$items = array();
while($row = mysql_fetch_object($rs)){
    array_push($items, $row);
}
$result["rows"] = $items;

echo json_encode($result);

代码首先计算偏移量 offset,随后执行两次查询:一次获取总记录数用于分页控件渲染,另一次获取当前页数据。最终通过 json_encode 输出标准格式,供前端自动解析并刷新表格。

安全与兼容性优化建议

原始示例使用了已废弃的 mysql_* 函数族。自 PHP 5.5 起该扩展已被移除,建议迁移至 PDO 或 MySQLi,并采用预处理语句防止 SQL 注入。例如使用 PDO 时,可将查询改写为:

$stmt = $pdo->prepare("SELECT * FROM item WHERE itemid LIKE :itemid AND productid LIKE :productid LIMIT :offset, :rows");
$stmt->execute([
    ':itemid' => $itemid . '%',
    ':productid' => $productid . '%',
    ':offset' => $offset,
    ':rows' => $rows
]);

同时,建议对输入参数进行类型校验与长度限制,避免异常数据导致查询失败或性能下降。在生产环境中,还应记录查询日志并监控慢查询,确保 DataGrid 在高并发场景下的稳定性。

游乐网为非赢利性网站,所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系youleyoucom@outlook.com。

同类文章
更多
Angular 2 JavaScript 环境配置与首个应用搭建

Angular 2 JavaScript 环境配置与首个应用搭建

本文详细介绍如何使用 JavaScript 配置 Angular 2 运行环境,涵盖项目目录创建、依赖安装、组件与模块编写、启动逻辑及 HTML 入口配置。通过完整代码示例与运行步骤,帮助开发者快速搭建并运行首个 Angular 2 应用,同时提供环境排查与版本升级建议。

时间:2026-08-31 14:29
Angular 2 TypeScript 环境配置与项目搭建指南

Angular 2 TypeScript 环境配置与项目搭建指南

本文详细介绍如何使用 TypeScript 配置 Angular 2 开发环境,包括安装依赖、创建配置文件、编写组件代码、定义宿主页面以及编译运行应用程序的完整步骤。

时间:2026-08-31 14:25
Angular 2 数据显示:插值、ngFor 与 ngIf 实战指南

Angular 2 数据显示:插值、ngFor 与 ngIf 实战指南

本文详解 Angular 2 中将组件数据渲染到视图的三种核心方式:插值表达式、*ngFor 循环与 *ngIf 条件渲染。通过完整的 TypeScript 组件代码与模板示例,演示如何绑定基础属性、遍历数组及对象列表,并根据数据长度动态控制 DOM 显示。适用于需要快速掌握 Angular 模板语法与数据绑定机制的开发者。

时间:2026-08-31 14:17
Angular 2 用户输入事件绑定与模板变量实战

Angular 2 用户输入事件绑定与模板变量实战

本文介绍如何在 Angular 2 中处理用户输入事件,涵盖点击事件绑定、$event 对象获取输入、模板引用变量使用、按键过滤(keyup enter)及 blur 事件。通过完整代码示例,帮助开发者掌握 Angular 事件绑定的核心语法与最佳实践。

时间:2026-08-31 14:14
Angular 2 表单开发教程:数据绑定、验证与提交

Angular 2 表单开发教程:数据绑定、验证与提交

本教程详细讲解如何在 Angular 2 中构建表单,涵盖项目初始化、模型定义、组件与模块配置、模板驱动表单的双向数据绑定、状态验证及表单提交。通过完整代码示例与步骤说明,帮助开发者快速掌握 Angular 表单的核心用法。

时间:2026-08-31 14:11
热门专题
更多
刀塔传奇破解版无限钻石下载大全 刀塔传奇破解版无限钻石下载大全
洛克王国正式正版手游下载安装大全 洛克王国正式正版手游下载安装大全
思美人手游下载专区 思美人手游下载专区
好玩的阿拉德之怒游戏下载合集 好玩的阿拉德之怒游戏下载合集
不思议迷宫手游下载合集 不思议迷宫手游下载合集
百宝袋汉化组游戏最新合集 百宝袋汉化组游戏最新合集
jsk游戏合集30款游戏大全 jsk游戏合集30款游戏大全
宾果消消消原版下载大全 宾果消消消原版下载大全
  • 热门数据榜