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ですね。
あとは頑張ってくれ ・・・ことで。
