- 2009-07-07 (火) 16:45
- jQuery
データを簡単にテーブルにフォーマットしてくれるjQuery プラグイン Flexigrid を使ってみた。
Flexigrid
http://www.flexigrid.info/
Google Code
http://code.google.com/p/flexigrid/
DBから吸い出して管理画面などでさくっとテーブルにしたい場合に非常に便利!
具体的にどんなことができるのかはマイコミジャーナルさんの記事がわかりやすいのでリンク
わずか数行で”ものすごいテーブル”に! – jQueryプラグイン「Flexigrid」
ただこのプラグインあまりリファレンスがない・・・
jsを開けばオプションは一目瞭然なのだが、自分メモとして残しておきます。
オプションパラメータ一覧
UIパラメータ
- width
- テーブルの横幅。数値もしくは auto が利用可能。auto に設定した際は横のリサイズは無効。
デフォルト:auto - height
- テーブルの高さ。数値もしくは auto が利用可能。auto に設定した際は縦のリサイズは無効。
デフォルト:200 - striped
- 格子行を利用するかどうか。
デフォルト:true - novstripe
- 列の区切りを表示しないかどうか。(no vertical stripe)
デフォルト:false - minwidth
- 各列の最小幅
デフォルト:30 - minheight
- テーブルの最小高さ
デフォルト:80 - resizable
- リサイズを可能にするかどうか。true にすると width および height が auto でなければそれぞれ右端、下端にリサイズアイコンが表示される
デフォルト:true - title
- テーブルのキャプション。設定するとタイトル行が表示される。
- showTableToggleBtn
- テーブルの表示非表示ボタンを設置するかどうか。title に文字が設定されている場合のみ有効。
デフォルト:false - minColToggle
- 最小列数。この設定した列数以下は非表示にできなくする。
デフォルト:1 - showToggleBtn
- 列を非表示にするボタンポップアップを表示するかどうか。
デフォルト:true - singleSelect
- 行の複数選択を可能にするかどうか。
デフォルト:false
Ajaxによる動的出力で利用するパラメータ
- url
- Ajax のリクエストされるURL。XML もしくは JSON 出力
- method
- 送信メソッド
デフォルト:POST - dataType
- 読み込むデータのタイプ。json or xml。必ず小文字で指定しなければならないことに注意!
デフォルト:xml - errormsg
- エラーが発生した際のメッセージ
- usepager
- ページャーを使用するかどうか。
デフォルト:false - nowrap
- セル内で折り返しを許可するかどうか
デフォルト:true - page
- 現在表示しているページ数。読み込んだ JSON もしくは XML で上書きされる。
- total
- 格納されているデータの総行数。読み込んだ JSON もしくは XML で上書きされる。
- sortname
- ソートする列。指定しないと送信時 undefined が POST されてしまうので必須。
- sortorder
- ソートの方向。asc or desc。指定しないと送信時 undefined が POST されてしまうので必須。
- query
- 検索されたキーワード。
- qtype
- 検索対象の列名
- rp
- 1ページに表示する行数。
デフォルト:15 - useRp
- 1ページに表示する行数を変更できるセレクトボックスを表示するかどうか。
デフォルト:true - rpOptions
- useRp を有効にした際のセレクトボックス値の配列。
デフォルト:[10,15,20,25,40] - pagestat
- 現在表示しているページの説明文フォーマット
表示開始行:{from}、表示終了行:{to}、総数:{total}が利用できる。
デフォルト:Displaying {from} to {to} of {total} items - procmsg
- 読み込み中時フッターに表示されるメッセージ。
デフォルト:Processing, please wait … - no msg
- 検索データが存在しなかった場合のメッセージ。
デフォルト:No items - autoload
- HTML表示時に自動的に読み込みを開始するかどうか。
デフォルト:true - hideOnSubmit
- 送受信中に現在表示データ行を隠すかどうか。(?)
デフォルト:true - blockOpacity
- hideOnSubmit を有効にした際の表示データ行の透明度。(?)
デフォルト:0.5
その他パラメータ
- colModel
- 列の設定オブジェクトをもつ配列
display:列の表示名
name:列のユニークID(テーブルカラム名)必須
width:列幅
sortable:列のソートを有効にするかどうか
align:文字の配置
hide:非表示にするかどうか - searchitems
- 検索対象となる列の配列
display:検索対象を選択するセレクトボックスの表示文字
name:列のユニークID(テーブルカラム名)必須
isdefault:初期選択されているかどうか。 - buttons
- ヘッダにボタンを表示する際のボタン情報を格納した配列
name:ボタン表示文字
bclass:ボタンの表示クラス
onpress:ボタンを押された際に呼び出されるメソッドseparator:セパレータを表示
イベントハンドラメソッド
- onToggleCol
- 列の表示非表示が変更された際に呼び出されるイベントハンドラメソッド。
- onChangeSort
- ソートが変更された際に呼び出されるイベントハンドラメソッド。
- onSuccess
- 表示が成功した際に呼び出されるイベントハンドラメソッド。
- onSubmit
- データの送受信が行われる直前に呼び出されるイベントハンドラメソッド。
その他メソッド
- preProcess
- データを受信した直後にデータを成形するため(と思われる)に呼び出される。
引数:読み込みデータ
戻り値:成形データ
Flexigrid API メソッド
- flexigrid( options )
- テーブルを Flexigrid 化する。コンストラクタ。
- flexReload()
- データの再読み込みを行う。
- flexOptions( options )
- オプションパラメータの変更を行う。
- flexToggleCol( culumn_id, visible )
- 列の表示・非表示を切り替える。
- flexAddData( data )
- データを追加する。
- noSelect
- データ行の文字列をカーソルで選択できないようにする。
へー。そんなことできるんだー。
これで合ってるかな?
もし違ってればやさしくツッコミください。
Comments:1
- chuchu 13-05-10 (金) 20:11
-
わかったら教えてください!
グリッドの中で列の幅を%指定したいのですができません。(%にすると、グリッド自体消えてしまう・・・)
ブラウザの横幅が変わったときに、常にウィンドウの幅に連動してグリッド自体の幅が変わるようにすることはできたのですが、
項目のWidthを%指定できないので、項目の横幅を連動させることができず困っています。。列の幅を%で指定するなどして、常にグリッド内で各項目のバランスが取れるようにするにはどうしたらいいのか、
分かったら教えてください。。【補足】
グリッドの一番右端に編集用アイコンを置きたいと思っており、ブラウザのサイズが変えられたときも、
常に右端に編集アイコンが表示されている(空白スペースがない)状態にしたいと考えています。
Trackbacks:2
- Trackback URL for this entry
- http://blog.cuegraphix.com/wp-trackback.php?p=86
- Listed below are links to weblogs that reference
- jQueryのFlexigridを使ってみた from blog.cuegraphix.com
- pingback from blog.cuegraphix.com - jQueryのFlexigridを使ってみた(2) データ編 09-07-07 (火) 18:26
-
[...] Older [...]
- pingback from JQueryのFlexiGrid(json)の簡単な使い方 | WEB | C# カフェ ~プログラマー達の憩い場 12-10-28 (日) 18:57
-
[...] jQueryのFlexigridを使ってみた → FlexiGridで使う各パラメタがまとめられていて便利。 [...]