使用easyUI添加查询功能在datagrid
2012-08-09 17:07
477 查看
@author YHC
在这个示例中我们将向你展示如何从数据库得到数据显示他们到datagrid,然后演示如何根据用户输入的搜索关键词搜寻显示结果.
![](http://my.csdn.net/uploads/201208/09/1344503698_5605.png)
查看 Demo
创建 datagrid和分页功能然后添加工具栏到其中.
<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" onclick="doSearch()">Search</a>
</div> 当用户输入查询值和按下查询按钮'doSearch'函数将被调用.
function doSearch(){
$('#tt').datagrid('load',{
itemid: $('#itemid').val(),
productid: $('#productid').val()
});
} 以上代码我们调用了load方法去加载新的datagrid数据,我们需要传入itemid和productid参数到服务器:
easyui-datagrid-demo.zip
在这个示例中我们将向你展示如何从数据库得到数据显示他们到datagrid,然后演示如何根据用户输入的搜索关键词搜寻显示结果.
![](http://my.csdn.net/uploads/201208/09/1344503698_5605.png)
查看 Demo
创建 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" onclick="doSearch()">Search</a>
</div> 当用户输入查询值和按下查询按钮'doSearch'函数将被调用.
function doSearch(){
$('#tt').datagrid('load',{
itemid: $('#itemid').val(),
productid: $('#productid').val()
});
} 以上代码我们调用了load方法去加载新的datagrid数据,我们需要传入itemid和productid参数到服务器:
服务器端代码
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);
下载 EasyUI 示例代码:
easyui-datagrid-demo.zip
相关文章推荐
- 使用easyUI添加查询功能在datagrid
- EasyUI使用心得——datagrid的查询功能和SubGrid冲突导致分页无效问题
- 使用easyUI 添加toolbar到datagrid
- 使用easyui实现的添加公告功能(后台管理)
- easyui-datagrid 过滤器功能发送的参数在discuz端的接收与使用
- EasyUI使用心得——datagrid的条件查询的中文化
- EasyUI使用心得——datagrid的条件查询,过滤
- 使用EasyUI实现添加和删除功能
- BOS项目练习3(修复window控件BUG,添加/修改/作废取派员,datagrid使用,分页查询(DetachedCriteria离线),formatter函数)
- EasyUI DataGrid使用formatter属性实现自定义功能
- 【第十一篇】这一篇来说说MVC+EF+easyui datagrid的查询功能
- 手写链表(二)-使用内部类实现添加、查询、定位、插入等功能
- 关于使用DataGrid的ButtonColumn,动态添加DataGrid列,实现不定列n个文件的下载功能
- 为easyUI的dataGrid添加自己的查询框
- EasyUI DataGrid使用formatter属性实现自定义功能
- 使用easyUI给datagrid添加pagination
- 使用easyUI给datagrid添加pagination
- 使用easyUI的datagrid显示查询得到的List<Object>对象
- design项目:2、mybatis + easyui datagrid 分页查询功能介绍
- 如何使用Node.js操作redis来完成添加查询功能的具体介绍