jQuery EasyUI フォームプラグイン -Combogrid コンボグリッド

jQuery EasyUI 插件jQuery EasyUI プラグイン

$.fn.combo.defaults と $.fn.datagrid.defaults から拡張されています。$.fn.combogrid.defaults を使用してデフォルトの defaults を上書きします。

コンボグリッド（combogrid）は、編集可能なテキストボックスとドロップダウンデータグリッドパネルを組み合わせたもので、ユーザーはドロップダウンデータグリッドパネルから素早く検索して選択できます。コンボグリッド（combogrid）は、項目を選択するためのキーボードナビゲーションをサポートしています。

依存関係

  • combo
  • datagrid

用法

コンボグリッド（combogrid）を作成する

1. マークアップからコンボグリッド（combogrid）を作成します。

<select id="cc" class="easyui-combogrid" name="dept" style="width:250px;"
    data-options="
    panelWidth:450,
    value:'006',
    idField:'code',
    textField:'name',
    url:'datagrid_data.json',
    columns:[[
    {field:'code',title:'Code',width:60},
    {field:'name',title:'Name',width:100},
    {field:'addr',title:'Address',width:120},
    {field:'col4',title:'Col41',width:100}
    ]]
    "></select>

2. 既存の <select> または <input> 要素から JavaScript を使用して作成します。

<input id="cc" name="dept" value="01">

    $('#cc').combogrid({
    panelWidth:450,
    value:'006',
    idField:'code',
    textField:'name',
    url:'datagrid_data.json',
    columns:[[
    {field:'code',title:'Code',width:60},
    {field:'name',title:'Name',width:100},
    {field:'addr',title:'Address',width:120},
    {field:'col4',title:'Col41',width:100}
    ]]
    });

オートコンプリート機能

コンボグリッド（combogrid）にオートコンプリート機能を追加しましょう。ドロップダウンデータグリッドは、ユーザーの入力に基づいて可能な結果を表示します。

$('#cc').combogrid({
    delay: 500,
    mode: 'remote',
    url: 'get_data.php',
    idField: 'id',
    textField: 'name',
    columns: [[
        {field:'code',title:'Code',width:120,sortable:true},
        {field:'name',title:'Name',width:400,sortable:true}
    ]]
});

サーバー側では、'q' パラメータが最初に取得される必要があります。ユーザーはデータベースをクエリし、JSON 形式の SQL 結果をブラウザに返すことができます。

get_data.php: 

$q = isset($_POST['q']) ? $_POST['q'] : ''; // the request parameter
// query database and return JSON result data
$rs = mysql_query("select * from item where name like '$q%'");
echo json_encode(...);

プロパティ

このプロパティは、コンボ（combo）とデータグリッド（datagrid）から拡張されています。以下は、コンボグリッド（combogrid）に追加されたプロパティです。

名前 型 説明 デフォルト値
loadMsg string データグリッド（datagrid）がリモートデータをロードするときに表示されるメッセージ。 null
idField string id のフィールド名。 null
textField string テキストボックスに表示される text フィールド名。 null
mode string テキストが変更されたときにデータグリッド（datagrid）データをどのようにロードするかを定義します。コンボグリッド（combogrid）がサーバーからロードする場合は 'remote' に設定します。'remote' モードに設定すると、ユーザーが入力した値は 'q' という名前の HTTP リクエストパラメータとしてサーバーに送信され、新しいデータを取得します。 local
filter function(q, row) 'mode' が 'local' に設定されている場合にローカルデータを選択する方法を定義します。true を返すとその行が選択されます。
コード例：
$('#cc').combogrid({
    filter: function(q, row){
        var opts = $(this).combogrid('options');
        return row[opts.textField].indexOf(q) == 0;
    }
});
100

イベント

このイベントは、コンボ（combo）とデータグリッド（datagrid）から拡張されています。

メソッド

このメソッドはコンボ（combo）から拡張されています。以下は、コンボグリッド（combogrid）に追加またはオーバーライドされたメソッドです。

名前 パラメータ 説明
options none オプション（options）オブジェクトを返します。
grid none データグリッド（datagrid）オブジェクトを返します。次の例は、選択された行を取得する方法を示しています：
var g = $('#cc').combogrid('grid');    // get datagrid object
var r = g.datagrid('getSelected');    // get the selected row
alert(r.name);
setValues values コンポーネントの値の配列を設定します。
コード例：
$('#cc').combogrid('setValues', ['001','007']);
setValue value コンポーネントの値を設定します。
コード例：
$('#cc').combogrid('setValue', '002');
clear none コンポーネントの値をクリアします。
jQuery EasyUI 插件jQuery EasyUI プラグイン その他の拡張