jQueryのFlexigridのflexOptions、paramsについて

今更ながらにFlexigridです。
データロード時に任意のパラメーターをサーバーサイドに
渡す方法が見つからなかったのでまとめてみました。
flexOptions、paramsはあまり使われていないのですかね。

以下のような画面で入力された内容を元に
データを絞り込んで描画するというケースは多いかと思います。
Flexigridのデータロードも$.ajax関数で行っているので
dataに値を渡せれば良いわけです。
Flexigridにはparamsがあり、これがdataへの受け渡し口になっています。
paramsにはflexOptionsで値をセットします。

f:id:cobot00:20130928144034p:plain

[今回のポイント]
・flexOptions
・params
・onSubmit

JavaScriptの記述は以下のようになります。
なお、今回の記述ではsetLoadParamsが2回実行されます。
通常はonSubmitだけの記述になるはずですが
状況によってパラメーターを変えたいといったケースでは
onSubmitではflexOptionsを呼び出さず、個別に処理を記述することになるかと。

(function($){
    var AJAX_URL = 'Ajaxの通信先サーバーを指定しよう';
    var ID_TEST_GRID = '#test_grid';

    $(function() {
        init();
    });

    function init() {
        $("#btn_load").click(function(){
            load();
        });

        $(ID_TEST_GRID).flexigrid({
            url: AJAX_URL,
            method: 'POST',
            dataType: 'json',
            onSubmit: setLoadParams, // Ajaxでの通信前に実行されるイベント
            width: 250,
            height: 150,
            autoload: false,
            buttons:[
                {name: 'これでもロード可能', bclass: 'loadBtn', onpress: load},
                {separator: true}]
        });
    }

    function load() {
        // onSubmitを指定していない場合はflexReloadを実行前にパラメーターをセットする
        // 今回のケースではonSubmitでの実行と合わせてsetLoadParamsは2回実行されます
        setLoadParams();

        $(ID_TEST_GRID).flexReload();
    }

    function setLoadParams() {
        // 「params」の値は配列で渡す必要があります
        var loadCond = [
            {name: 'cond1', value: $('#cond1').val()},
            {name: 'cond2', value: $('#cond2').val()}
        ];

        // 「params」は$.ajax関数の「data」の値を受け渡すためのプロパティ
        $(ID_TEST_GRID).flexOptions({
            params: loadCond
        });

        /* onSubmitに指定している場合はtrueを返さないと
           flexigrid.jsのpopulate関数内でAjax通信が実行されません
           
           ※populate関数内の実装
            if (p.onSubmit) {
                var gh = p.onSubmit();
                if (!gh) {
                    return false;
                }
            }
        */
        return true;
    }
    
})(jQuery);

ちなみにHTMLは以下のようになります。

<HTML>
<HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset="utf-8">
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <link rel="stylesheet" href="./css/flexigrid.css" />
    <script type="text/javascript" src="./scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="./scripts/flexigrid.js"></script>
    <script type="text/javascript" src="./scripts/flexigrid_test.js"></script>
    <TITLE>test</TITLE>
</HEAD>
<BODY>
    <br>
    <div>条件1 &nbsp;<input id="cond1" type="text" /></div>
    <div>条件2 &nbsp;<input id="cond2" type="text" /></div>
    <br>
    <input type="button" id="btn_load" value="条件を指定してロード"/>
    <br>
    <br>
    <table id="test_grid">
        <thead>
            <tr>
                <th width="50">列A</th>
                <th width="50">列B</th>
                <th width="50">列C</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>A-1</td>
                <td>B-1</td>
                <td>C-1</td>
            </tr>
            <tr>
                <td>A-2</td>
                <td>B-2</td>
                <td>C-2</td>
            </tr>
        </tbody>
    </table>
</BODY>
</HTML>