メニューを閉じる

テクノモバイルグループ

メニューを開く

2016.06.20

プログラミング

【Web】【javascript】「jqGrid」で少しリッチなテーブルを作成する 応用編

どうも、RTです。

前回の記事「【Web】【javascript】「jqGrid」で少しリッチなテーブルを作成する 基礎編」で、jqGridの導入について紹介しました。

今回は、jqGridにいろいろなオプションを付与してみようと思います。

今回のサンプルは、タイムカードの出力。
DBに格納されているタイムカードのデータをjqGridで表示します。
出力までの導入方法の例は前回の記事を参照してみてください。

今回付けるオプションは以下の通りです。

  • ヘッダー(タイトル)を表示
  • フッター(ページャー)を表示
  • チェックボックスを追加
  • 行の編集機能を追加
  • 行の削除機能を追加
  • 検索機能を追加
  • テーブルのリフレッシュ機能追加

何かと面倒くさそうな感じですが、jqGridでは標準に実装されている機能ですのですぐに実装できます。

前回の記事より少しだけオプションを増やしています。

表示してみるとこんな感じです。
スクリーンショット 2016-06-18 21.14.18

オプションは公式Wikiにもありますが色々と設定できます。
とりあえず以下な感じで設定してみました。

また、左下にナビゲーションボタンが付いていますね。
スクリーンショット 2016-06-18 21.14.18_2

以下のコードで実装しています。

デフォルトでは以下のようにダイアログが表示されます。
機能要件としては十分なのではないでしょうか?
スクリーンショット 2016-06-18 21.15.14
スクリーンショット 2016-06-18 21.16.05
POST先も「url」オプションで指定できますので、サーバー側で詳細な実装もできそうですね。

もし機会があればぜひ使ってみてください。


【テクノモバイルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』
https://qangaroo.jp/

最近の記事

SNS共有

X CLOSE
X CLOSE
X CLOSE