jQuery EasyUI使用教程之過濾ComboGrid

Combogrid組件和Combobox組件的共同點是,除了都具備下拉麪板之外，它們都是基於數據網格的。Combogrid組件能夠過濾、分頁，並具備其餘一些數據網格的功能。本教程向您展現如何在一個Combogrid組件中過濾數據記錄。

jQuery EasyUI最新試用版下載請猛戳>>

點擊查看示例

建立Combogrid

1	<input id="cg" style="width:150px">

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$('#cg').combogrid({ panelWidth:500, url: 'form5_getdata.php', idField:'itemid', textField:'productid', mode:'remote', fitColumns:true, columns:[[ {field:'itemid',title:'Item ID',width:60}, {field:'productid',title:'Product ID',align:'right',width:80}, {field:'listprice',title:'List Price',align:'right',width:60}, {field:'unitcost',title:'Unit Cost',align:'right',width:60}, {field:'attr1',title:'Attribute',width:150}, {field:'status',title:'Stauts',align:'center',width:60} ]] });

Combogrid組件應該定義'idField'和'textField'屬性。 'idField'屬性存儲組件值，'textField'屬性在input文本框中顯示文本消息。Combogrid組件能夠以'local'或'remote'模式過濾記錄。 在遠程模式中，當用戶輸入字符到input文本框中，Combogrid將發送 'q' 參數到遠程服務器。

服務器代碼

form5_getdata.php

1 2 3 4 5 6 7 8 9 10

$q = isset($_POST['q']) ? strval($_POST['q']) : '';   include 'conn.php';   $rs = mysql_query("select * from item where itemid like '%$q%' or productid like '%$q%'"); $rows = array(); while($row = mysql_fetch_assoc($rs)){ $rows[] = $row; } echo json_encode($rows);

下載EasyUI示例：easyui-form-demo.zip