企业官网建设流程全解析

网站备案照相,网站 编程语言,.net电商网站全站开发,网站设计 wordpressjQuery EasyUI 数据网格 - 添加查询#xff08;搜索#xff09;功能 为 datagrid 添加查询功能是实际应用中最常见的需求之一。EasyUI 官方没有内置统一的搜索框#xff0c;但可以通过以下几种方式轻松实现#xff1a; 工具栏#xff08;toolbar#xff09;搜索框 手动…jQuery EasyUI 数据网格 - 添加查询搜索功能为datagrid添加查询功能是实际应用中最常见的需求之一。EasyUI 官方没有内置统一的搜索框但可以通过以下几种方式轻松实现工具栏toolbar搜索框 手动查询最常用、灵活内置搜索框扩展使用 datagrid 的 load 参数过滤本教程重点介绍第一种方式在工具栏添加搜索框和按钮点击“查询”后向服务器传递参数重新加载数据。官方参考带搜索的 DataGrid 示例https://www.jeasyui.com/tutorial/datagrid/datagrid23.php在线 Demohttps://www.jeasyui.com/demo/main/index.php?pluginDataGridpitemClientPagination步骤 1: 创建带工具栏的 DataGridtableiddgclasseasyui-datagridtitle用户管理stylewidth:800px;height:500pxdata-optionsurl:get_users.php,fitColumns:true,pagination:true,rownumbers:true,pageSize:10theadtrthfieldidwidth80sortabletrueID/ththfieldusernamewidth100用户名/ththfieldnamewidth100姓名/ththfieldemailwidth180邮箱/ththfieldphonewidth120电话/ththfieldregdatewidth100sortabletrue注册日期/th/tr/thead/table!-- 工具栏 --dividtoolbardivstylepadding:5px;用户名:inputidsearch_usernameclasseasyui-textboxstylewidth:150px;姓名:inputidsearch_nameclasseasyui-textboxstylewidth:150px;注册日期从:inputidsearch_startdateclasseasyui-dateboxstylewidth:120px;到:inputidsearch_enddateclasseasyui-dateboxstylewidth:120px;ahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-searchonclickdoSearch()查询/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-reloadonclickclearSearch()重置/a/div/div步骤 2: 配置工具栏和 JavaScript 查询逻辑scripttypetext/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$pageisset($_POST[page])?intval($_POST[page]):1;$rowsisset($_POST[rows])?intval($_POST[rows]):10;$offset($page-1)*$rows;$where WHERE 11 ;$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_sqlSELECT COUNT(*) AS total FROM users.$where;$stmt$pdo-prepare($count_sql);$stmt-execute($params);$total$stmt-fetch()[total];// 查询数据$sqlSELECT * 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.keyCode13){doSearch();}}})});高级搜索面板可折叠将搜索条件放入一个 panel 或 dialog点击“高级搜索”展开。客户端分页搜索数据量小使用clientPagination: true 本地数据搜索时过滤 rows。更多示例官方搜索示例https://www.jeasyui.com/tutorial/datagrid/datagrid23.php复杂查询表单https://www.jeasyui.com/demo/main/index.php?pluginDataGridpitemSearchBox如果需要高级搜索弹窗、模糊搜索自动完成、导出带查询条件的数据或其他高级查询功能请继续提问