リクエスト広場

tablesortのボタンの配置変更

1 コメント
views
3 フォロー

現在ヘッダー行全てにソートボタンが配置されます。
ヘッダー行が複数ある場合はすべてのヘッダー行に、結合されたヘッダーにも配置されます。
これらをやめるかオプションを追加して以下のようにしてください。

ソートボタンはボタン専用の行を追加挿入しそこに配置する。
ユーザーが書いたヘッダー行の表示に変更を加えない。

具体的には例えば以下のような表があったとき
#tablesort(){{
|A|B|C|h
|1|2|3|
|4|5|6|
}}

  • 現在の状況
    ▲がソートボタン
    |A▲|B▲|C▲|h
    |1|2|3|
    |4|5|6|
    これをやめて以下のようにする。

  • Under
    |A|B|C|h
    |▲|▲|▲| //ソート行(ヘッダーの下)
    |1|2|3|
    |4|5|6|

  • Top
    あるいは先頭に
    |▲|▲|▲| //ソート行(先頭)
    |A|B|C|h
    |1|2|3|
    |4|5|6|

  • Top + Bottom
    表が縦に長いと先頭に戻るのが大変なので下の方にも
    |▲|▲|▲| //ソート行(先頭)
    |A|B|C|h
    |1|2|3|
    |4|5|6|
    |▲|▲|▲| //ソート行(最後尾)

以下のようにオプション指定できればよいです。現状との互換性が必要なら未指定の場合は現状維持で。
できればtop+botのように同時に使用したいですが、機能ボタンが複数あると問題な場合はどれか一つ選択でもよいです。(一つのみの場合はBotはいらないかも。)

#tablesort(under,top,bottom){{テーブル}}

理由
ソートボタンが既存のヘッダー文字列の横に追加配置されると表の各ヘッダーセルの横幅が広がりレイアウトが崩れます。
崩れるといっても幅広になるだけですが、各列の余白が広がり表がスカスカになるのと、表全体が横長になり表示領域を食われます。
また複数あるヘッダー行全てにボタンが配置されるのも無駄です。
ヘッダーが複数行あるケースは、上から大分類(結合)小分類みたいなヘッダー表現の仕方や、ヘッダに単位のみの行(m、%など)を入れてたりなどです。

現在は対策として以下のように表とヘッダ行を分離するなどしてしのいでます。
||||c //書式指定で幅をそろえる
|A|B|C|h
     //ここを一行開けて表示のみヘッダと以下実体とを分離)
#tablesort(){{
||||c //書式指定で幅をそろえる
||||h //ダミーのヘッダ行を入れてここにボタンのみが出るように
|1|2|3|
|4|5|6|
}}

01v
作成: 2021/09/05 (日) 22:53:42
通報 ...
1
01v 2021/09/07 (火) 09:38:17 修正

以下の案を追加。

  • ソートボタンが表示されるヘッダー行を限定する
    例えば以下のように書いたとき

    #tablesort(s=2){{ //s=2はヘッダーの2行目にボタン配置を指示してる
    |A|B|C|h
    ||||h // ユーザが指定したボタン配置用のヘッダー
    |1|2|3|
    |4|5|6|
    }}
    

    結果以下のように表示させる。

    |A|B|C|h //ここにはボタンを表示しない
    |▲|▲|▲|h // ここ(2行目)にのみボタンが配置される
    |1|2|3|
    |4|5|6|
    

    またボタン表示を指定されたヘッダー(上記例では2行目)は通常のヘッダ通り文字を表示してもよい。
    たとえば2行目に以下のように書けば

    |x|y|z|h // ユーザが指定したボタンは配置用のヘッダー
    

    以下のように従来通り文字の右にボタンが追加される。

    |x▲|y▲|z▲|h //
    

    ボタン表示のヘッダーを指示できるメリットは、ボタン配置をラベル+ボタンの表現が取れる。
    言い方を変えると従来の問題は望んでいないヘッダー行にボタンが挿入されることであり、これを抑制した形になる。
    (変更作業的にこれが簡単か?)

  • ソートボタン専用の書式指定を追加する
    書式指定sを追加し、その行にボタンを配置する。
    例えば以下のように書いたとき

    #tablesort(){{
    |A|B|C|h
    ||||s // ここにソートボタンを配置したい。tablesortしない場合は非表示。
    |1|2|3|
    |4|5|6|
    }}
    

    以下のように表示される。

    |A|B|C|h
    |▲|▲|▲|s
    |1|2|3|
    |4|5|6|
    

    前述のヘッダ行指定同様、s行には文字も記述可能として文字+ボタンの表現を可能とする。
    ただしソートを使わない場合はs行を非表示とする。
    これのメリットはボタン位置がヘッダに限定されなくなるので、任意の位置にボタンを配置できる。
    ヘッダー行は必ず上詰めで表示されてしまうが、この方法なら最後尾や途中行などにも配置できる。汎用性が高い。
    また、ソートが掛かるのはs行以下のような機能に拡張できるかもしれない。