カスタムグリッドテーブル - fete's toybox

カスタムグリッドテーブル

独自にグリッドテーブルを利用する方法の解説。
下記の設定項目を上から順番に記述していく。

設定項目

グリッドテーブルのID	#divid(grid_table){ID}	*1
グリッドテーブルの幅	#divid(grid_table_width){幅}
グリッドテーブルの高さ	#divid(grid_table_height){高さ}
1ページに表示する行数	#divid(grid_pagesize){行数}
カラム（列）の設定	#divclass(grid_columns){列名,列の幅,ツールチップの幅}	*2
各データの設定	#divclass(grid_data){1列目の内容~2列目の内容}	*3
簡易フィルターの設置	spanclass(grid_filter){列名}	*4
選択式フィルターの設置	spanclass(grid_select_filter){列名}	*4
グリッドテーブル表示用divタグ	#divid(ID){表示領域}	*5
javascriptの読み込み	#include(lib/gridtable/custom)	*6

*1 IDは半角英数字で指定する。
*2 列の幅を超える内容は、ツールチップの幅を任意で指定することでツールチップを表示することができる。
*3 区切り文字の「~」は「|」に置き換える。 
*4 フィルターの設置は任意。設置する場合はspanclassの頭に&をつける。
*5 ここだけは{}ではなく()の中身を変更する。内容はグリッドテーブルのID。
*6 javascriptを記述したページの読み込みはすべての設定が終わった後に行う。

設定例

// グリッドテーブルの設定
#divid(grid_table){sample}
#divid(grid_table_width){280}
#divid(grid_table_height){250}
#divid(grid_pagesize){100}
#divclass(grid_columns){名前,50}
#divclass(grid_columns){効果,100,120}
#divclass(grid_columns){種類,100}
// ここからはグリッドテーブルに表示するデータの設定
#divclass(grid_data){テスト|test|通常テスト}
#divclass(grid_data){|←のとおり、空白にしても問題はない|空白テスト}
#divclass(grid_data){テスト３|[[wiki構文も使用可能>トップページ]]|通常テスト}
// フィルターとグリッドテーブル表示タグを設置
名前&spanclass(grid_filter){名前}効果&spanclass(grid_filter){効果}&nbsp(3)&spanclass(grid_select_filter){種類}
#divid(sample){サンプル}
// 最後にグリッドテーブルを表示するためのjavascriptを読み込み、表示させる
#include(lib/gridtable/custom)

上記設定の場合にはこのようなグリッドテーブルが表示される。

sample

280

250

100

名前,50

効果,100,120

種類,100

テスト|test|通常テスト

|←のとおり、空白にしても問題はない|空白テスト

テスト３|wiki構文も使用可能|通常テスト

名前名前効果効果   種類

サンプル

include_js plugin Error : このプラグインで利用できない命令または文字列が入っています。 javascript plugin Error : このプラグインで利用できない命令または文字列が入っています。