SAStruts君がjqGridさんとFormな話

formタグを使ったよくある検索フォームでjqGridを使って一覧表示をしたいちゅ〜のがありまして・・・
サーバサイドをSAStruts（Seasar）で実装して、Action側ではFormクラスでフォームで入力された値を受け取る
・・・って感じなんですが。
とりあえず、開発メンバにやらせていたらjqGridのページング情報が入らないとか・・・

・・・まあ、そこまでのサンプルは渡していませんが、もう少し進められないかとは思うが。

ということで、結局オレか　



とりあえずサーバサイドのForm、SAStrutsでPOJOなFormクラスね、
------------------------------------------------------
public class SearchitemForm implements Serializable {
    private static final long serialVersionUID = 1L;
    public SearchitemParam searchitemParam = new SearchitemParam();
    // jqGrid paging用
    public int page;
    public int rows;
    public String sidx;
    public String sord;
    // jqGrid paging用
    public SearchitemForm() {
    }
}

public class SearchitemParam implements Serializable {
    private static final long serialVersionUID = 1L;
    public String itemName;
    public String itemid;
    public String priceStart;
    public String priceEnd;
    public SearchitemParam() {
    }
}
------------------------------------------------------

で画面（JSP）側

------------------------------------------------------
<s:form  method="post" styleId="searchfrm">
    <div align="right">
        <html:button value="ログアウト" property="logout" onclick="location.href='${f:url('/logout')}'" />
    </div>
    <div align="center" class="body">
        <h2>マスタ管理 - 商品一覧画面（Grid版）</h2>
        <html:errors />
        <input type="hidden" id="needLoadList" value="${responseDxo.needLoadList}" />
        <table>
            <tr>
            <td>商品名検索<input type="text" id="itemName" name="searchitemParam.itemName"/></td>
            </tr>
            <tr>
            <td>商品ID検索<input type="text" id="itemid" name="searchitemParam.itemid"/></td>
            </tr>
            <tr>
            <td>価格検索
                <input type="text" id="priceStart" name="searchitemParam.priceStart"/>
                〜
                <input type="text" id="priceEnd" name="searchitemParam.priceEnd"/>
            </td>
            <td><input type="submit" id="searchbtn" name="" value="検索" /></td>
            </tr>
        </table>
        <div id="searchList">
            <table id="list"></table>
            <div id="pager2" style="height: 30px"></div>
        </div>
    </div>
</s:form>
------------------------------------------------------

でJavaScript側の処理ですが、
よく、ググるとformタブの値をjQueryで送信するには「serializeArray」ということで、

------------------------------------------------------
searchModel.postData =  jQuery("#searchfrm :input").serializeArray();jQuery("#list").jqGrid(searchModel);

------------------------------------------------------

とかしたいのですが、実際のデータ（serializeArray）はこんなになる

------------------------------------------------------
[
    {"name":"searchitemParam.itemName","value":"asdfghh"},
    {"name":"searchitemParam.itemid","value":"hkllfd"},
    {"name":"searchitemParam.priceStart","value":"3333"},
    {"name":"searchitemParam.priceEnd","value":"4444444"}
]
------------------------------------------------------

まあ、その名の通りな変換な訳ですね。


単純にそのままサーバに送る場合（つまり　$.ajax とでかね）ならFormに入るのですよ、実は。
ただ、.jqGridを経由するとjqGridでページングをするための情報がなくなるのですな。
どうやら、こうやるとご丁寧に当該の情報をつぶしてくれるらしい・・・orz
まあ、Formデータ送信ではなく単品の項目を設定して実行するのは確認していて、それから考えて単純にデータの送り方の問題ということで、結論からいくと以下のようになっていればOKなんで

------------------------------------------------------
{
    "searchitemParam.itemName":"asdfghh",
    "searchitemParam.itemid":"hkllfd",
    "searchitemParam.priceStart":"3333",
    "searchitemParam.priceEnd":"4444444"
}
------------------------------------------------------

ちゅ〜ことで、 nameはプロパティでvalueはプロパティ値になっていれば良いじゃんということで、

------------------------------------------------------
function setFormData2SendData(target, src) {
    for (var i = 0 ; i < src.length ; i++) {
        target[src[i].name] = src[i].value;
    }
}

jQuery(function() {
    jQuery('#searchfrm').submit(function(evt) {
        evt.preventDefault();
        var postData2 = {};
        var temp =  jQuery("#searchfrm :input").serializeArray();
        setFormData2SendData(postData2, temp);
        searchModel.postData = postData2;
        jQuery("#list").GridUnload();
        jQuery("#list").jqGrid(searchModel);
    });

------------------------------------------------------

んで、サーバサイドでは

OKですね。

あとは頑張ってくれ　・・・ことで。