sortable_tableプラグインについて の変更点

Top > sortable_tableプラグインについて

*概要 [#e38a5f81]
並べ変え、フィルタ機能が利用可能なテーブルプラグインです。
旧sortabletableの新バージョンとなります。

*使い方 [#u8a5cf51]

書式は以下のようになります。~
 #sortable_table(ソート属性[Number|String]|...,自動連番有効化[autonum=1],自動連番加算値[numstep=1],自動連番見出し[numname=No],見出し背景色[head=#000000],奇数行背景色[odd=#000000],偶数行背景色[even=#000000],フィルタ機能有効化[filter],見出しの折り返し禁止[nowrap],テーブル幅[width=100]){{
 テーブル
 }}


- ソート属性
列ごとに|で区切って指定します。並べ替え実行時に、文字列として評価するか、数値として評価するかを指定します。
-- Number:数値として評価します
-- Date:日付として評価します
-- String:文字列として評価します
※ソート属性が指定されない場合は文字列として評価されます。
- 自動連番有効化
1をセットすることで、各行の先頭に自動連番のカラムが追加されます。
- 自動連番加算値
自動連番が有効な場合、連番の増加値を指定します。未指定の場合、初期値は1です。
- 自動連番見出し
自動連番が有効な場合、列の見出しに表示されるタイトルを指定します。初期値は"No"です。
- 見出し背景色
見出し行の背景色を指定します。
- 奇数行背景色、偶数行背景色
奇数行と偶数行で指定した背景色が表示されます。
- フィルタ機能有効化
filterを指定することでフィルタ機能が有効となります
- テーブル幅
テーブル幅を指定します。(単位=%)

** 注意 [#r0022104]
- セルが「>」や「~」により連結されているテーブルでは予期せぬ動作となる場合がございます。
- テーブル幅と最大高さは同時に指定できません。
** 使用例 [#jceb5ae7]
*** 自動連番指定、見出しと奇数偶数行の背景色指定、フィルタなし [#u5ff0923]
#sortable_table(Number|Date|String,autonum=1,numstep=10,numname=番号,head=#f0f0f0,odd=#ffffff,even=#f6f9fb,fixedheader){{
#sortable_table(Number|Date|String,autonum=1,numstep=10,numname=番号,head=#f0f0f0,odd=#ffffff,even=#f6f9fb){{
|~数値|~日付|~文字列----------------------※|h
|RIGHT:|CENTER:|LEFT:20|c
|11111|2024/01/05|文字列セル1行目|
|22222|2022/12/11|文字列セル2行目|
|33333|2026/11/3|文字列セル3行目|
|44444|2022/8/21|文字列セル4行目|
|55555|2011/6/17|文字列セル5行目|
|66666|2021/3/27|文字列セル6行目|
|77777|2014/2/8|文字列セル7行目|
|88888|2019/10/9|文字列セル8行目|
|99999|2024/5/30|文字列セル9行目|
|00000|2030/12/1|文字列セル10行目|
|99999|2020/03/03|文字列フッタ|f
}}
 #sortable_table(Number|Date|String,autonum=1,numstep=10,numname=番号,head=#f0f0f0,odd=#ffffff,even=#f6f9fb){{
 |~数値|~日付|~文字列----------------------※|h
 |RIGHT:|CENTER:|LEFT:20|c
 |11111|2024/01/05|文字列セル1行目|
 |22222|2022/12/11|文字列セル2行目|
 |33333|2026/11/3|文字列セル3行目|
 |44444|2022/8/21|文字列セル4行目|
 |55555|2011/6/17|文字列セル5行目|
 |99999|2020/03/03|文字列フッタ|f
 }}

*** 幅指定、見出しの折り返し禁止、フィルタON [#d4458ebb]
#sortable_table(Number|Date|String,filter,nowrap,width=50){{
|~数値|~日付|~文字列----------------------※|h
|RIGHT:|CENTER:|LEFT:20|c
|11111|2024/01/05|文字列セル1行目|
|22222|2022/12/11|文字列セル2行目|
|33333|2026/11/3|文字列セル3行目|
|44444|2022/8/21|文字列セル4行目|
|55555|2011/6/17|文字列セル5行目|
|99999|2020/03/03|文字列フッタ|f
}}
 #sortable_table(Number|Date|String,filter,nowrap,width=50){{
 |~数値|~日付|~文字列----------------------※|h
 |RIGHT:|CENTER:|LEFT:20|c
 |11111|2024/01/05|文字列セル1行目|
 |22222|2022/12/11|文字列セル2行目|
 |33333|2026/11/3|文字列セル3行目|
 |44444|2022/8/21|文字列セル4行目|
 |55555|2011/6/17|文字列セル5行目|
 |99999|2020/03/03|文字列フッタ|f
 }}