再帰処理でデータを取得し追加・更新・削除可能なグリッドに表示

本記事のポイント

ライブラリは汎用的関数の集合体、プラグインは特定ソフト用拡張プログラム、ウィジェットはライブラリ(プラグイン)が提供するコントロール(部品)、jQueryはJavaScriptでよく使われる機能を簡単に呼び出せるようにしたライブラリ、AjaxはJavaScriptの非同期通信に焦点をあてた概念です。

ライブラリとプラグインの違い

業務システムのマスタ管理画面にはCRUD(Create/Retrieve/Update/Delete)機能付きのデータグリッドが便利なのですが、一番シンプルなのはjQueryとJQuery Easy UIのみで実現するDataGridです。

ツリー表示で使ったjsTreeはjQueryのプラグインであり<script>タグの中に別途jstreeプラグインを読み込む必要がありましたが、DataGridはTabsなどと同じようにJQuery UIのウィジェットにあたります。

ライブラリとプラグインの違いは汎用的か特定ソフト用かなのでjQuery UIはライブラリでもありjQuery用のプラグインでもあると言えると思います。またWordPressのウィジェットがサイドバーへの機能追加に特化したプラグインなのに対し、jQuery UIのウィジェットは言葉の使われ方が若干異なります。

ということでちょっと言葉の整理をしておきたいのですが・・・

  1. ライブラリは汎用的関数の集合体
  2. プラグインは特定ソフト用拡張プログラム
  3. ウィジェットはライブラリ(プラグイン)が提供するコントロール(部品)
  4. jQueryはJavaScriptでよく使われる機能を簡単に呼び出せるようにしたライブラリ
  5. AjaxはJavaScriptの非同期通信に焦点をあてた概念

DataGridがあるにもかかわらず多くのメーカーがデータグリッド用のライブラリ(プラグイン)を出している理由は以下の2つで差別化を図りたいからです。

  1. 見栄え > 見栄えの良いRIA(Rich Internet Applications)技術
  2. スピード > 時間のかかる処理を非同期実行(Ajax利用)

jQuery UIの基本DataGrid実装方法

それで今回はDataGridを使うのですが、ざっくり以下の3つを実装すれば実現できそうです。

  1. HTMLテーブルにグリッド装飾class要素とCRUDアクションのid要素
  2. 親子関係からデータを取得する再帰処理関数を作成
  3. CRUDアクション時のダイアログを定義し新規・更新・削除ボタンにマッピング

まずタブ&パネルと同じようにheadタグの中でjQueryライブラリとjQuery用のUIライブラリ(インターフェースデザイン用ライブラリ)であるjQuery UIを読み込む必要がありますが、jQuery UIはライブラリ本体とスタイルシートを読み込む必要があります。

データグリッド画面はid要素dgで定義し、HTMLテーブルをデータグリッド化するためのclass要素easyui-datagridを指定し、データは再帰関数で取得しレコードセットの値を表に表示します。

 

DBから再帰処理で親子関係のデータを取得しDataGridに流す処理

ツリー表示でやった再帰処理のテーブルバージョンです。やってることは同じで、子品目(C_ITM_CD)にマッチする親品目(P_ITM_CD)があればデータを表示し、再帰的に自関数を読む処理をマッチする親品目がなくなる(最下層品目)まで繰り返します。

関数を定義しidセレクタでダイアログを取得し、datagridメソッドで選択行に対して処理を行います。
新規・更新・削除用のダイアログはid要素dlgで定義し、それぞれの関数にマッピングする。