ナビゲーションバーの解説

昨日の続き。

ナビゲーションバーには色々な機能があって

ページング
ソーティング(カラムをクリックすれば勝手にソートリクエストを飛ばしてくれるので、別にナビゲーションバーの機能ではないが)
検索
詳細表示
追加
編集
削除

と、DBとの連携は完璧だ。

※ちなみに、以下の説明はデフォルトの設定での説明で、いくらでも拡張できるようになっている。例えばリクエストの際に使用するパラメータ名も変更可能だし、ユーザデータも送信したいなど自分でパラメータを追加することもできる。

ページング、検索

まずはページング、及び検索機能について。
サーバにアクセスする際は、jqGrid 構築時のオプション "url" を使用する。デフォルトはGETメソッドだが、mtypeオプションでPOSTも使用できる。

問題は、その際のレスポンスなのだが、

total：全ページ
page：現在ページ
records：全レコード数
rows：データ

となっている。この情報を元にページング操作ができるようになっている。もちろん、phpやperlなどで動的にレスポンスを返さないといけない。(今は静的なファイルにアクセスしているのでちゃんと動かない)

検索フォームは、複数選択用と単一選択用と両方あり、検索の際のリクエストURLが変わってくるのだが、複数選択ができれば単一選択なんて使用しないので、ここでは複数選択しか説明しない。

検索の際にサーバへ送信されるリクエストボディは以下のようになる。

_search      true
filters     {"groupOp":"AND","rules":[{"field":"employee_no","op":"eq","data":"123"},{"field":"name","op":"cn","data":"shima"}]}
nd          1253416753755
page        1
rows        20
sidx        name
sord        asc

search：検索ボタンを押した際はこれtrueになる。ページングやソーティングの際はfalseになる場合もある。まぁ別に意識しなくてもいいだろう
filters：検索条件一覧。特に説明は要らない。
nd：クライアントサイドの時刻を付与してくれる。
page：何ページ目のデータを表示して欲しいかの指定。
rows：1ページに何レコードか。
sidx：ソートで使用するカラム名
sord：ソートの順番。昇順、降順。

詳細表示

選択した行のグリッドデータをフォーム風に表示するだけ。

追加、編集、削除

入力フォームを表示して、入力された内容を "editurl" オプションにPOSTメソッドで送信する。削除の場合は行IDのみを送信する。
リクエストボディは以下のようになる。

追加



employee_no     111

id              _empty

name            あああ

oper            add

編集



employee_no     0005

id              5

name            name0005

oper            edit

削除



id              5

oper            del

これらを実行後、現在表示している検索条件で再度データを取得するためのリクエストを行う。

リロード

リロードボタンを押した後、"afterRefresh" オプションに指定した関数が実行される。まぁそれだけ・・。