jQuery EasyUI使用教程之在數據網格中添加搜索功能

<jQuery EasyUI最新版下載>

在本教程中，咱們將向你展現如何從數據庫中獲取數據，並將其顯示到數據網格中，而後演示如何根據用戶輸入的搜索關鍵字搜索顯示結果。

查看演示

建立數據網格

建立具備分頁功能的數據網格，而後將工具欄添加到其中。

< 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

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的文章！