22EasyUI 数据网格- 添加查询功能
数据 查询 功能 添加 网格
2023-09-11 14:15:41 时间
下面演示如何从数据库得到数据,并将它们显示在数据网格(datagrid)中。然后再演示如何根据用户输入的搜索关键词搜寻显示结果。
创建数据网格(DataGrid)
创建带有分页功能的数据网格(datagrid),然后添加工具栏到其中。
<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"
url="datagrid24_getdata.php" toolbar="#tb"
title="Load Data" iconCls="icon-save"
rownumbers="true" pagination="true">
<thead>
<tr>
<th field="itemid" width="80">Item ID</th>
<th field="productid" width="80">Product ID</th>
<th field="listprice" width="80" align="right">List Price</th>
<th field="unitcost" width="80" align="right">Unit Cost</th>
<th field="attr1" width="150">Attribute</th>
<th field="status" width="60" align="center">Stauts</th>
</tr>
</thead>
</table>
工具栏定义
<div id="tb" style="padding:3px">
<span>Item ID:</span>
<input id="itemid" style="line-height:26px;border:1px solid #ccc">
<span>Product ID:</span>
<input id="productid" style="line-height:26px;border:1px solid #ccc">
<a href="#" class="easyui-linkbutton" plain="true" "doSearch()">Search</a>
</div>
当用户输入查询值并按下查询按钮时,‘doSearch’ 函数将被调用:
function doSearch(){
$('#tt').datagrid('load',{
itemid: $('#itemid').val(),
productid: $('#productid').val()
});
}
上面的代码调用了 ‘load’ 方法来加载新的数据网格(datagrid)数据。我们需要传递 ‘itemid’ 和 ‘productid’ 参数到服务器。
相关文章
- python查询redis数据
- sql语句CASE when用法,查询数据时判断数据是否符合条件,并返回指定值
- 干货 | 一改测试步骤代码就全写?为什么不试试用 Yaml实现数据驱动?
- 一文2000字手把手教你自动化测试Selenium+pytest+数据驱动
- 【Vue】通过keep-alive实现路由组件的数据缓存
- Google Earth Engine ——非洲参考蒸发量(RET_E)数据集FAO/WAPOR/2/L1_RET_E
- ElasticSearch中的文档和查询响应数据
- 百亿级数据分表后怎么分页查询?
- 深入浅出Docker容器数据卷
- Mysql查询数据时,自动为结果编上序号
- mysql数据查询 5.排序
- solr开发从查询结果集中获取对象数据
- 《PHP和MySQL Web开发从新手到高手(第5版)》一一2.6 将数据插入到表中
- 《位置大数据隐私管理》—— 2.5 连续查询攻击
- 如何高效率的查找一个月以内的数据?
- 计算机网络笔记总结:Part3 数据链路层
- 数据实时计算
- Qt编写数据可视化大屏界面电子看板3-新建布局
- 一群人花费了四年的时间以NASA的数据巨制“月球”
- 【微信小程序】数据绑定
- PHP MySQL连接并查询数据
- SQL Server 执行计划利用统计信息对数据行的预估原理二(为什么复合索引列顺序会影响到执行计划对数据行的预估)
- sqlserver查询数据的所有表名和行数
- C#中遍历各类数据集合的方法总结
- 雅虎正式承认Verizon可能会因数据泄露事故放弃收购
- 利用SQLiteOpenHelper实现SQLite数据的写入和查询
- 数据不须要自由,但须要做爱
- 单片机第11课:串口通信查询方式---从计算机接受数据
- hive数据查询
- flask+vue:创建一个数据列表并实现简单的查询功能(一)
- SQLServer查询和删除表中重复数据;SQLServer 一列或多列重复数据的查询和删除;SQLServer分组去重
- EF 数据查询效率对比