作品 ID: 2919

自動ソートのできるテーブルのサンプル

公開

日本語プログラミング言語「なでしこ」 Advent Calendar 2024、九日目の記事用。ヘッダ部分をクリックすると、その列をキーに表ソートします。押すたびに昇順と降順がトグルします。

ソース

プログラム

＃テーブルを作成
テストデータ＝「名前,ふりがな,点数
太郎,たろう,55
花子,はなこ,100
一郎,いちろう,80」をCSV取得。
テストテーブル＝テストデータのテーブル作成。

昇順＝はい。
テストテーブルをクリックした時には、
    # 三角のラベルをクリックした時も動くようにする
    もし、(対象.nodeName＝「TH」)または(対象.nodeName＝「SPAN」)ならば、:
        セル＝対象。
        もし、(対象.nodeName＝「SPAN」)ならば、セル＝対象.parentNode。
        ソート列＝セルのセル列番号。
        ヘッダ＝テストデータの0を配列切り取り。
        テストデータのソート列を表ソート。
        もし、昇順＝はいでなければ、テストデータを配列逆順。
        昇順=昇順*-1。
        テストデータの0へヘッダを配列挿入。
        テストテーブルをテストデータにテーブル更新。
        記号＝「▲」
        もし、昇順=はいならば、記号＝「▼」
        ソート列に記号のソート記号追加。
ここまで。

●(列に記号の)ソート記号追加
    変数 全ヘッダ＝テストテーブルの「th」をDOM子要素全取得。
    母艦＝DOM親要素。
    全ヘッダを反復:
        対象にDOM親部品設定。
        もし、対象キー＝列ならば、:
            記号のラベル作成。
            それに{
                "margin-left":"0.5em",
                "vertical-align":"middle",
                "font-size":"0.7em",
                "色":灰色
            }をDOMスタイル一括設定。
    母艦にDOM親部品設定。
ここまで。

●(セルの)セル列番号
    セル.cellIndexを戻す。
ここまで。

作品について

作品情報

作品を編集

雪乃☆雫作

ライセンス: CC0（著作権破棄）
形式: wnako
タグ: アドベントカレンダー2024, サンプル
利用バージョン: 3.6.37
アクセス数(累計): 133
アクセス数(今月): 65
更新日時: 2024/12/06 15:10 編集: 2024/12/09 10:36

⭐

作品公開情報

交流

コメントを取得中...