w2grid.searches

検索項目の配列を指定します。

* このプロパティを指定すると、リモートデータ(.urlプロパティを指定した場合)は正しく出力されますが、 ローカルデータは出力されないようです。

Array, default = []

.searchObjectはオブジェクト作成時に初期化するか、 オブジェクト生成後の任意のタイミングで生成することができます。 この配列は検索が実行されたタイミングで使用されるため、 グリッドの更新は必要ありません。

オブジェクト作成時に指定する場合

$('#grid').w2grid({
    name : 'grid',
    show : { toolbar : true },
    columns : [                
        { field: 'recid', caption: 'ID', size: '50px' },
        { field: 'lname', caption: 'Last Name', size: '30%' },
        { field: 'fname', caption: 'First Name', size: '30%' },
        { field: 'email', caption: 'Email', size: '40%' },
        { field: 'sdate', caption: 'Start Date', size: '120px' },
        { field: 'sdate', caption: 'End Date', size: '120px' }
    ],
    searches : [
        { field: 'recid', caption: 'ID (int)', type: 'int' },
        { field: 'id', caption: 'ID (float)', type: 'float' },
        { field: 'fname', caption: 'First Name', type: 'text' },
        { field: 'lname', caption: 'Last Name', type: 'text' },
        { field: 'email', caption: 'Email', type: 'list', 
            options: { items: ['vitali@gmail.com', 'jim@gmail.com'] } },
        { field: 'sdate', caption: 'Date', type: 'date' }
    ]
});

または、w2gridオブジェクト生成後に指定します。

w2ui['grid'].searches[0] = { field: 'recid', caption: 'ID', type: 'int' };

検索はツールバーからのみ実行出来るので、.show.toolbarか.show.toolbarSearchをtrueにする必要があります。

検索配列の構造は以下のとおりです。

search = {
    type     : 'text',    // 検索タイプ(後述)
    field    : '',        // サーバ送信時のフィールド名
    caption  : '',        // 検索のキャプション
    inTag    : '',        // <input ...>タグの中に表示するテキスト
    outTag   : '',        // <input ...>タグの外に表示するテキスト
    hidden   : false,     // 検索を表示するか、非表示にするか
    options  : {}         // w2fieldのオプション
}

検索タイプは以下を指定することができます。

• text
• int
• float
• hex
• money
• currency
• percent
• alphanumeric
• date
• time
• list
• combo
• enum

検索はJavaScriptから制御することができます。 詳しくは以下を参照して下さい。

• .search()- 検索を実行する。
• .searchOpen()- 検索ダイアログを表示する。
• .searchClose()- 検索ダイアログを閉じる。
• .searchReset()- 全ての検索項目をデフォルト値に戻します。

デモ

「Search」プルダウンから検索ボックスに入力する時に、 それぞれの項目に「型」が指定されているため、型に合った値のみが入力できます。 「Search」ボタンを押すと、入力した内容がPOSTされます。
グリッドに検索結果は反映されません。

JavaScript

$('#grid').w2grid({
    name    : 'mygrid',
    url     : '../json/data.json',
    show : { toolbar : true },
    columns: [
        { field: 'recid', caption: 'ID', size: '50px' },
        { field: 'lname', caption: 'Last Name', size: '30%' },
        { field: 'fname', caption: 'First Name', size: '30%' },
        { field: 'email', caption: 'Email', size: '40%' },
        { field: 'sdate', caption: 'End Date', size: '120px' }
    ],
    searches : [
        { field: 'recid', caption: 'ID (int)', type: 'int' },
        { field: 'id', caption: 'ID (float)', type: 'float' },
        { field: 'fname', caption: 'First Name', type: 'text' },
        { field: 'lname', caption: 'Last Name', type: 'text' },
        { field: 'email', caption: 'Email', type: 'list', 
            options: { items: ['vitali@gmail.com', 'jim@gmail.com'] } },
        { field: 'sdate', caption: 'Date', type: 'date' }
    ]
});