保存到桌面加入收藏设为首页
EasyUI
当前位置:首页 > Web技术 > EasyUI

easyui在DataGrid数据表格中添加搜索功能

时间:2013-07-26 01:56:49   作者:梦幻小纯哥   来源:永硕E盘装饰网   阅读:1480   评论:0
内容摘要:AddsearchfunctionalityinDataGrid在DataGrid数据表格中添加搜索功能Inthistutorialwewillshowyouhowtogetdatafromdatabaseanddisplaythemtodatagrid.Andthendemon...

 

Add search functionality in DataGrid

DataGrid数据表格中添加搜索功能

 

In this tutorial we will show you how to get data from database and display them to datagrid. And then demonstrate how to search through the results according the search terms the user enters.

在本教程中我们将展示如何从数据库获取数据,并显示在datagrid数据表格中。然后演示如何根据用户输入的搜索条件,进行搜索。

 

datagrid的搜索功能的效果图如下:

easyui在DataGrid数据表格中添加搜索功能

 

Create DataGrid

创建DataGrid数据表格

 

Create the datagrid with paging feature and then add a toolbar to it.

创建数据表格和分页功能, 然后向数据表格中添加一个工具栏。

 

<table id="tt" class="easyui-datagrid" style="width:700px;height:250px"

              url="datagrid24_getdata.php"

              title="Searching" iconCls="icon-search" toolbar="#tb"

              rownumbers="true" pagination="true">

 

       <thead>

              <tr>

                     <th field="itemid" width="80">Item ID</th>

                     <th field="productid" width="120">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="200">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>

 

 

 

The toolbar is defined as:

工具栏被定义为:

<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>

 

 

When user enters search values and press search button, the 'doSearch' function will be called:

当用户输入搜索值并按搜索按钮,doSearch”函数会被调用:

<script type="text/javascript">

       function doSearch(){

              $('#tt').datagrid('load',{

                     itemid: $('#itemid').val(),

                     productid: $('#productid').val()

              });

       }

</script>

 

 

The code above we call 'load' method to load new datagrid data. We need to pass 'itemid' and 'productid' parameters to server.

上面的代码,我们调用“load”方法来加载新的datagrid数据。我们需要传递“itemid’和‘productid”参数去服务器。

 

The Server Code

服务器端的代码

<?php

       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);

?>

 



相关评论