jQuery EasyUI フォーム -コンボグリッドのフィルタリング

コンボグリッド（Combogrid）コンポーネントとコンボボックス（Combobox）コンポーネントの共通点は、どちらもドロップダウンパネルを備えていることに加えて、データグリッド（Datagrid）をベースにしているということです。 コンボグリッド（Combogrid）コンポーネントは、フィルタリング、ページング、およびその他のデータグリッド（Datagrid）の機能を備えています。 このチュートリアルでは、コンボグリッド（Combogrid）コンポーネントでデータレコードをフィルタリングする方法を説明します。

コンボグリッド（Combogrid）の作成

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

$('#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' モードでレコードをフィルタリングできます。 リモート（remote）モードでは、ユーザーが input テキストボックスに文字を入力すると、コンボグリッド（Combogrid）は 'q' パラメータをリモートサーバーに送信します。

サーバーサイドのコード

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

jQuery EasyUI サンプルをダウンロード

jeasyui-form-form5.zip