jqGrid

jqGridの内容をsubmitする方法【Servlet】

jqGrid_submit

表示サンプル

今回はこの表の中身をsubmitしてServletに渡します。

jqGrid_サンプル

 

今回は完全にベタ書きの内容ですが、セルを編集できるようにする方法もあるので、そのような場合に有効です。

 

設計思想

jqGridでイイ感じに渡してくれるといいのですが、そのような機能はございません。

なので、今回はonSubmitイベントを拾ってhiddenタグを動的に生成して渡します。

かなり力技です。

 

コーディング

論よりコードということで、さっそく見ていきましょう。

まずは、あまり深追いせずに全体像をつかんでください。

 

実際に下記の処理を動かすとコンソールにこのように表示されます。

 

 
ログインID:1、パスワード:a、氏名:大阪太郎
ログインID:2、パスワード:b、氏名:兵庫花子
ログインID:3、パスワード:c、氏名:京都正彦

 

Java側のコード

JqGridParts.java

今回隠し列で「id」を追加しています。

このidを使ってhiddenタグのnameを一意にします。

まぁ今はあまり気にせず続きをどうぞ。

 

JqGridServlet.java

 

doPostの処理は普通の画面から値を取得するのと同じ処理なので、わかってる人はすっ飛ばしてもらって大丈夫です。

 

今回はPOSTで送っているので、doPostを実装しました。

まず始めにリクエストをUTF-8でエンコードしています。

これがないと氏名が文字化けします。

 

あとは、「id」というnameでjqGridの行数分hiddenタグを作っているので、String配列で「id」を取得します。

その後、「id」配列をグルグル回しながらログインIDやパスワード、氏名を抽出しています。

 

JSP側のコード

index.jsp

今回のキモはcreateSubmitDataメソッドです。

ざっくりとした処理順序はコチラ。

 

var rows = $('#grid01').jqGrid("getRowData");でjqGridの全行を取得。

・rowsのlength分ループ

var row = rows[i];で一行分のデータ取得

・hiddenタグ作成

・nameやらvalueやら設定(valueはrow.~で取得)

・formに刺す(appendChild)

 

ちゃんと検証はしていませんが、おそらくrow.~の「~」の部分はModelのnameと一致させる必要がありそうです。

 

まとめ

今回はjqGridの内容をsubmitする方法を紹介しました。

 

これができないとjqGridまったく使えねーになるので、使用する機会がある人は参考にしてみてください。

 

\ 実際に現場にあるWordPressの本です! /

-jqGrid
-

© 2020 eureka