w2grid.search

レコードを検索します。 戻り値はundefinedです。

search(field, value)

field: string

検索項目のフィールド名。

value: string

検索項目の値。

search(searches, [logic])

searches: array

searchオブジェクトの配列。

logic: string

検索ロジック(AND/OR)の定義。オプションです。

説明

この関数は.searchData配列を生成し、検索の適用と更新を行います。
データソースがローカルの場合、.localSearch()メソッドを呼び出します。 データソースがリモートの場合、検索内容をサーバへ送信して、検索内容を適用します。

第1引数のfieldが文字列の場合、 検索項目のフィールド名となり、フィールド名かallを指定することができます。 (allの場合は、データ型が一致するフィールドを検索します。)
第2引数のstringは、検索文字列です。

第1引数が配列で、オプションの第2引数が文字列(AND/OR)の場合、 この関数は第1引数をsearchオブジェクトの配列とみなします。 一度に複数フィールド検索内容を送信することができます。

searchオブジェクトの構造は以下の通りです。

search = {
    field    : '',   // 検索フィールド名。
    value    : '',   // 検索内容。(2つの値の配列。betweenや、in等で使います。)
    type     : '',   // 検索フィールドの型。定義されていない場合はsearch.typeを使用します。
    operator : ''    // 演算子。'is', 'between', 'begins with', 'contains', 'ends with'を指定することができます。
                     // 指定しない場合は、typeに基づいて選択されます。
}

グリッドを以下のように定義すると

$('#grid').w2grid({
    name    : 'grid',
    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' }
    ],
    records: [
        { recid: 1, fname: 'John', lname: 'doe', email: 'vitali@gmail.com', sdate: '1/3/2012' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '2/4/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: '--', sdate: '4/23/2012' },
        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '5/3/2012' },
        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'vitali@gmail.com', sdate: '2/5/2012' }
    ]
});

以下のように指定します

w2ui['grid'].search('fname', 'm');
// or
w2ui['grid'].search('all', 'm');
// or
w2ui['grid'].search([{ field: 'date', value: ['1/1/2012', '1/10/2012'], operator: 'between'}], 'OR');

デモ

グリッドをクリックすると、検索内容が送信されます。 検索条件は、"sdate"が"2012/1/1～2012/4/10"のレコードです。

* ローカルデータソースを使うとレコードが空になってしまいます。

JavaScript

$('#grid').w2grid({
    name    : 'mygrid',
    url     : '../json/data.json',
    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' }
    ],
});
w2ui['mygrid'].on('click', function(event) {
    w2ui['mygrid'].search([{ field: 'sdate', value: ['1/1/2012', '4/10/2012'], operator: 'between'}], 'OR');
});