jQuery EasyUI使用教程之在数据网格中添加搜索功能

<jQuery EasyUI最新版下载>

在本教程中，我们将向你展示如何从数据库中获取数据，并将其显示到数据网格中，然后演示如何根据用户输入的搜索关键字搜索显示结果。

查看演示

创建数据网格

创建具有分页功能的数据网格，然后将工具栏添加到其中。

1 2 3 4 5 6 7 8 9 10 11 12

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

工具栏定义为：

1 2 3 4 5 6 7

< 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”函数将会被调用：

1 2 3 4 5 6

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

上面的代码调用了“load”方法来加载新的数据网格（datagrid）数据。我们需要传递“itemid”和“productid”参数到服务器。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

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

有兴趣的朋友可以点击查看更多有关jQuery EasyUI的教程！