flexigridと戯れる

flexigrid

jQueryﾌﾟﾗｸﾞｲﾝのFlexigridを使ってみた。

テーブルがｶｯｺｲｸなった(ΦωΦ)
配布サイトの内容を要約すると。

ただただ格好良くしたいだけの場合

$("table").flexigrid()

引数付きで格好良くしたい場合

$("table").flexigrid({

    height  : 'auto',

    striped : false

});

Ajaxでデータを取ってきて格好良くしたい場合

$("#flex1").flexigrid({

    url: 'post2.php',

    dataType: 'json',

    colModel : [

        {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},

        {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},

        {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},

        {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},

        {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}

        ],

    buttons : [

        {name: 'Add', bclass: 'add', onpress : test},

        {name: 'Delete', bclass: 'delete', onpress : test},

        {separator: true}

        ],

    searchitems : [

        {display: 'ISO', name : 'iso'},

        {display: 'Name', name : 'name', isdefault: true}

        ],

    sortname: "iso",

    sortorder: "asc",

    usepager: true,

    title: 'Countries',

    useRp: true,

    rp: 15,

    showTableToggleBtn: true,

    width: 700,

    height: 200

});

ﾌﾑﾌﾑ。ってｻｰﾊﾞｰｻｲﾄﾞはどのように。。。
ここ見てください的なところ見てみた。【ここ】

Perlのｻﾝﾌﾟﾙｺｰﾄﾞ載ってないのね orz
ってことで脳内の和英translatorがパンクしそうだったんで
ｻﾝﾌﾟﾙｺｰﾄﾞとﾘｸｴｽﾄとﾚｽﾎﾟﾝｽを基に解析ｽﾀｰﾄ

flexigridの引数

width
  • 幅ですね。ﾊｲ。autoも指定できる。
  • デフォルトは 'auto'
height
  • 高さですね。ﾊｲ｡ autoも指定できる。
  • デフォルトは 200
striped
  • ストライプ表示するか。
  • デフォルトは true
novstripe
  • true で縦の区切り線を消す。
  • 消している状態で行を選択すると、選択している行の区切り線が青くなる。
  • デフォルトは false
minwidth
  • 各カラムの最小の幅
  • デフォルトは 30
minheight
  • テーブルの最小の高さ
  • デフォルトは 80
resizable
  • リサイズできるようにするか
  • デフォルトは true
url
  • Ajaxで通信する際のURL
  • デフォルトは false
method
  • ﾘｸｴｽﾄの形式
  • デフォルトは 'POST'
dataType
errormsg
  • データ取得をミスったときのメッセージ
  • デフォルトは 'Connection Error'
usepager
  • ページング機能を使うかどうか
  • デフォルトは false
nowrap
useRp
  • 表示件数の選択ボックスを使うかどうか
  • デフォルトは true
rp
  • 初期の表示件数
  • rpOptionsを指定するときは配列に存在する値にしておくこと。
  • デフォルトは 15
rpOptions
  • 表示件数の選択ボックスの選択肢(配列で指定)
  • 例）[10,50,100]
  • デフォルトは [10,15,20,25,40]
title
  • 表のタイトルを指定する。
  • 指定時には表の上側に表示される。
  • falseの場合は表示しない
  • デフォルトは false
pagestat
  • 開始行、終了行、総行数を表示する文字列。
  • 開始行は {from} の文字列が変換される。
  • 終了行は {to} の文字列が変換される。
  • 総行数は {total} の文字列が変換される。
  • デフォルトは 'Displaying {from} to {to} of {total} items'
procmsg
  • 通信中に表示するメッセージ
  • デフォルトは 'Processing, please wait ...'
nomsg
  • 0行の場合に表示するメッセージ
  • デフォルトは 'No items'
minColToggle
  • カラムを表示/非表示にする際の最低表示数を指定する。
  • デフォルトは 1
showToggleBtn
  • カラムを表示/非表示できるようにするか
  • デフォルトは true
hideOnSubmit
  • デフォルトは true
autoload
  • デフォルトは true
blockOpacity
  • デフォルトは 0.5
onToggleCol
  • デフォルトは false
onChangeSort
  • デフォルトは false
onSuccess
  • デフォルトは false
onSubmit
  • デフォルトは false
colModel
  • 表示する各カラムについて定義する。
  • オブジェクトの配列で指定する。[ {} , {} , {}]みたいな
  • 各オブジェクトは下記の通りに定義する。
  • display : テーブルに表示するカラム名
  • name : サーバへのリクエスト時に使用するカラム名
  • width : カラムの幅
  • sortable : ソートできるようにするか。
  • align : ﾅﾆ寄にするか。'left','center','right'で指定する。

例)



colModel : [

     {display: 'Name', name : 'name', width : 100, sortable : true, align: 'left'},

     {display: 'Feature', name : 'feature', width : 200, sortable : false, align: 'left' },

     {display: 'Birth day', name : 'birth_day', width : 50, sortable : true, align: 'center'}

]

buttons
  • テーブル上部に表示するボタンについて定義する。(下部はページングボタン,検索ボタン等が表示されている)
  • オブジェクトの配列で指定する。[ {} , {} , {}]みたいな
  • 各オブジェクトは下記の通りに定義する。
  • name : ボタンに表示するメッセージ
  • bclass : ボタン要素のクラス名
  • onpress : ボタンを押した際に実行するfunctionを指定する
  • separator : trueを指定するとボタンの代わりに区切り線が表示される。

例)



buttons : [

	{name: 'Add', bclass: 'add', onpress : add_func},

	{separator: true},

	{name: 'Delete', bclass: 'delete', onpress : del_func},

	{separator: true}

]

searchitems
  • 検索機能を使う場合に定義する。
  • 検索機能を使うとテキストボックス、検索対象のカラムを選択するセレクトボックス、クリアボタンが表示される。
  • 配列のオブジェクトで指定する。[ {} , {} , {}]みたいな
  • 各オブジェクトは下記の通りに定義する。
  • display : 検索対象のカラム名
  • name : サーバへのリクエスト時に使用する検索対象のカラム名
  • isdefault : 検索機能使用時にデフォルトで選択するかどうか。trueで選択する。

例）



searchitems : [

    {display: 'Name', name : 'name', isdefault:true},

    {display: 'Feature', name : 'feature' }

]

params
  • サーバーへのリクエスト時に追加でパラメータを渡したいときに指定できる。
  • サンプルコードに書いてなかったので解析してよかったε=(￣。￣;A
  • 配列のオブジェクトで指定する。[ {} , {} , {}]みたいな
  • name : パラメータのキー名
  • value : パラメータの値

例)



params : [

    { name : "id"   , value : "12345" } ,

    { name : "pass" , value : "67890"}

]
一風変わった指定方法だぬん(ΦωΦ)

singleSelect
  • trueにすると行の選択を単一にできる。
  • デフォルトは false

リクエストパラメータ

  • 下記のパラメータがサーバに飛んでくるのでサーバ側の処理を実装する。
page
  • ページインデックス（5ページ目の場合 '5'）
qtype
query
  • 検索する文字列（検索機能）
rp
  • 取得する行数
sortname
sortorder
  • ソートの種類 'asc'か'desc'（ソート機能）

レスポンスの形式

  • 下記の形式で返すとflexigridが巧い事表示してくれる。
page
  • リクエストで飛ばしたのと同じ
total
  • 総行数。
rows
  • 配列のオブジェクトで指定する。[ {} , {} , {}]みたいな
  • 各オブジェクトは下記の通りに指定する。
  • id : 行の識別子。他の行の識別子と重複しなければ何でも良いかも。
  • cell : 配列で指定する。colModelで指定した配列の長さと相違の無いように注意する。

レスポンスの例）



{

  page : 1 ,

  total : 3 ,

  rows : [

    {

      id : "1",

      cell : ["Kate","７ｃｍを超える金魚を買っている","2003/1/2"]

    } ,

    {

      id : "2",

      cell : ["Tom","右肩が下がっていることが多い。<br />枝豆のにおいがする。","2003/1/2"]

    } ,

    {

      id : "3",

      cell : ["Mike","口呼吸なため、気管支系統が弱い。","2003/1/2"]

    }

  ]

}
HTMLタグもテーブル内で反映されるっぽい。<a>と<br />使えﾏｽﾀ。

まだまだ引数に与えるものがありそうなので適宜更新ｼﾏﾂ