jQuery

Javascript,jQuery

【jQuery】JSONデータをフィルタリングして指定のフォームに項目として表示させる方法

2018/10/03

PHP経由で取得したデータベースのレコードをJOSN形式に変換し、さらに条件に則ってフィルタして指定のセレクトフォーム(multiple)に選択肢として表示させたくなったので、試行錯誤しながら作ってみました。

これは個人的に使えるスクリプトとなった気がするぞ…!?

フォームに収めるデータをJSONに変換してフィルタする方法

元々、下の画像のようなメッセージの送信先(社員名)を選択する画面がありました。

『属性』欄にあるセレクトフォーム(1)で「性別指定」や「支社指定」といった大項目を選択、セレクトフォーム(2)にて選択した内容の詳細である「女」や「東京」といった内容を選択し、ボタン(3)のクリックで社員名リストを生成、宛先フォーム(4)に結果の社員名リストを表示させるという動作でした。

宛先フォーム(5)に対象の社員名を移動させたあとに、再度、属性フォーム(1)(2)を操作、ボタン(3)を押すとPOST通信されてページがリフレッシュされ、宛先フォーム(5)がクリアされてしまうという仕様だったので、クリアしないようにするのが今回のミッション。

ということで思いついたのが、画面を表示したときにデータベースから社員データを取得し、PHPでJSONデータを作成、Javascriptで(POST通信せずに)セレクトフォームを操作したときにリアルタイムで社員リストを作成(フィルタ)すれば良いのでは、という案。

書いていることは若干ややこしいですが、JSONデータを作成し、フィルタリングするだけで出来そうな予感。

デモはこちら

まずはデモを御覧ください。上でややこしく書いているいますが、単純にこういうことがしたかったってのがよく分かると思います。

『属性』の(A)で

  • 社員指定
  • 性別指定
  • 支社指定
  • 部署指定
  • 課指定

を選択、『属性』の(B)で

  • 性別 ⇒ 男 / 女
  • 支社 ⇒ 札幌 / 仙台 / 東京 / 大阪 / 広島 / 福岡 / 沖縄
  • 部署 ⇒ 営業部 / 商品部 /総務部
  • 課 ⇒ 営業 / 生産 / 物流 / マーケティング / 総務 / 経理 / システム

のように詳細選択し、『宛先』フォーム(右)へ、対象となる社員名を表示させるという流れとなります。

なお、属性(A)(B)は、以前作成した『連動プルダウン』プラグインを使用します。

【jQuery】連動プルダウン用プラグイン『jquery.tgHierSelect』をより簡単に設置できるようバージョンアップ

支社、性別、部署、課の各マスタは以下とします。

社員マスタは『ダミー個人情報サイト』さんを使い、適当に作成しました。

JSONデータ作成

下記のような手順でJSONデータを作成します。

(1)SQL発行

以下のようなSQLでレコードを取得します。
このあたりは使っているPHPフレームワーク等に依存するところでしょうか。

(2)取得したDBレコードをPHPでJSONにコンバート

取得した結果を、PHP上でJOSN形式にコンバートして、ビューに渡します。

json_encodeの仕様は下記を確認してください。
今回は特に何も指定せずコンバートしました。

ビューに渡す方法は各PHPフレームワークによって異なると思うので割愛します。
ちなみにCakePHP ですと、$this->set() あたりでビューに放り込めるはずです。

出来上がったJSONデータ

プルダウンなど、コード一式

Javascript

↑ マークしている部分が、JSONデータのフィルタを実際に行っているところです。

フィルタの仕様は以下のような形です。
gender_id のような、プロパティに対して判定を行っているだけの、単純なスクリプトです。

HTML

以下からは、フォーム部分のHTML。(A)(B)部分は私の作成した多段連動プルダウンのスクリプトに則っています。

デモはこちら

まとめ

POST通信させずにフォームデータを操作したいということでJSONを使用しフィルタさせましたが、これはなにかと他でも色々と使えそうな技な予感がします。

見ている人何かの足しになれば幸いです。

参考にしたサイトさま

created by Rinker
オライリー・ジャパン

-Javascript,jQuery
-, , , ,