jqGrid

jqGridを動的に表示する方法【カンタン】

jqGrid_dynamic

表示サンプル

今回はこんな表を動的表示してみます。

jqGrid_動的表示サンプル

 

設計思想

ちょっと強引ですが、スクリプトレットでJavaからHTMLを書き出します。

(ほかに何かいい方法があれば教えてください!)

スクリプトレットとはJSP(Java Server Pages)でJavaを動かすためのものです。「<%= hoge %>」で値を書き出すことができるというもの。今の時点ではこれぐらいざっくりで問題ありません。

 

やりたいこととして、ある条件で表の列自体を表示させたくないときとかありますよね。

そんなときにcolNameやcolModelをスクリプトレットで書き出します。

当然データもスクリプトレットです。

 

コーディング

百聞は一見にしかず。さっそくコードを見ていきましょう。

 

Java側のコード

JqGridParts.java

 

かんたんにやってることの補足をします。

 

getDataメソッドではデータを作っています。

今回は二次元配列を使っていますが、業務ではなにかしらのBeanクラスになると思います。

ここで「値が"1"だったら"〇"を出力する」など編集を行うこともできます。

 

getColNameメソッドでは表のヘッダーを定義しています。

Nameでも「管理者ユーザーだったらパスワードを表示する」など、表示制御を行うことができます。

 

getColModelメソッドでは列の定義しています。

今回の例では幅と文字寄せぐらいしか定義していないですが、チェックボックスやセレクトボックスにすることもできます。

カスタムフォーマッタというものを使えば自分で作ったHTMLを刺すこともできるので、jqGridの肝といっても過言ではないところですね。

列にボタンを表示させるときなんかはカスタムフォーマッタを使います。

 

注意しないといけないのは、NameとModelは同じ数にしておかないとエラーになるので気をつけてくださいね。

 

JSP側のコード

index.jsp

こちらも補足しておきます。

 

まずは、ページインポート。<%@ page import="test.JqGridParts"%>。

さきほど紹介したスクリプトレットは「<%= hoge %>」でしたが、こちらは「<% fuga %>」です。

=のあるなしが違いますね。

=あり:文字を書き出す処理

=なし:インポートやif文など書き出さない処理

「=あり」は末尾のセミコロンがないのにも気をつけてください。

 

次に<jsp:useBean>でJavaを使えるカタチにしています。

コメントと<jsp:useBean>の中身でなんとなくやってることは想像できるかと思います。

唯一ノータッチの「scope="session"」は今回はあまり気にしなくていいです。

気になる人は「スコープ セッション リクエスト」とかでググってみてください。

 

あとは前回ベタ書きだったところをスクリプトレットに変えているだけですね。

前回記事
jqGrid_dynamic
jqGridを動的に表示する方法【カンタン】

続きを見る

 

まとめ

今回はjqGridの動的な表示の仕方を解説しました。

次は、編集した内容をJava側にsubmitする方法をまとめます。

よかったら参考にしてみてください。

それでは!

 

-jqGrid
-

© 2020 eureka