jqGrid

jqGridのセルを編集可能にする。カレンダーやセレクトボックスの実例も【コピペでOK!】

表示サンプル

今回はこんなことができるようになるサンプルを提供します。

構文をコピペして、中身だけいじればすぐ使えます。

jqgrid_gifサンプル

 

コーディング

今回はJSP側ではjquery-uiを使っていたりして、jeGridだけではなく割と総力戦になっています。

 

Java側のコード

まずは、Java側の処理。

 

JqGridParts.java

 

ここでキモになるのが、Modelの設定です。

editable:trueでセルを編集可能に変更。

edittype:'select'でセレクトボックスにして、editoptions:{value:'0:男;1:女'}で中身を定義しています。

 

初期値はここで設定。

if ("0".equals(item[3])) {
buf.append(",SEX:'男'},");
} else {
buf.append(",SEX:'女'},");
}

 

注意点としてはNameとModelの数は同じにしないとjqGridが正常に表示できない点ですね。

 

なので、ユーザーによって表示制御を行うようなときは、NameとModelに同じif文を書くようにしてください。

 

JSP側のコード

次にJSP側のコードです。

 

index.jsp

 

headタグでsrc="https:~"となっているところは、CDNというファイルの読み込ませ方です。

Web上にあるファイルを読み込んで使用しています。

 

この書き方はWeb上のファイルが消されたり、場所が移動されたりすると途端に動かなくなります。

なので、企業のシステムとかでは使えないでしょうね。

僕は実際に使っているところを見たことがないです。

 

ただ、個人で勉強するときなんかはめっちゃ便利

いろんなところからファイルをダウンロードしてくるのメンドくさいもん。。。

 

あとは、afterEditCellでただのテキストボックスにカレンダーを表示できるようにしています。

この「Edit」はあなたがセルをEdit(編集)したイベントではありません。

jqGridがただのテーブルのいちセルからテキストボックスにEditしたイベントになるので注意してください。

Editの主体は「あなた」ではなく「jqGrid」です。

 

なので、セル→テキストボックスに変わってからjQueryのdatepickerを呼びだしているわけです。

 

まとめ

今回でjqGridについては終了になります。

 

中々便利なライブラリなので、興味が湧きましたらぜひいじってみてください。

 

それでは!

 

\ GWのお供に! /

-jqGrid
-

© 2020 eureka