テーブル拡張プラグイン

なでしこさんのテーブル部品に編集、自ソート動、行選択、セル幅変更の機能を付与するNAKO3プラグイン。日本語プログラミング言語「なでしこ」 Advent Calendar 2024、25日目の記事用。

エディタ

プログラム

/*-------------------------------------------
【テーブル＋】　1.0.0
　テーブル拡張プラグイン。
　v3のテーブル部品にv1のグリッド部品的な、編集、自動ソート、行選択、セル幅変更の機能を付与します。

※　制作時のナデシコバージョン:3.6.39
-------------------------------------------*/
＃オプション
変数 テーブル拡張オプション＝{
    "選択行色":"#CCCCFF",
    "編集":オン,
    "行選択":オン,
    "自動ソート":オン,
    "セル幅変更":オン
}

＃テーブル＋
●(テーブルに)テーブル拡張設定
    テーブルの「table-layout」に「fixed」をDOMスタイル設定。
    テーブル拡張オプションを反復:
        もし、対象＝オンならば、
            対象キーで条件分岐:
                「編集」ならば、テーブルのテーブル編集可能。。。
                「行選択」ならば、テーブルのテーブル行選択可能。。。
                「自動ソート」ならば、テーブルのテーブル自動ソート可能。。。
                「セル幅変更」ならば、テーブルのテーブルセル幅変更可能。。。
        違えば、
            テーブルの対象キーに対象をデータ属性設定。
        ここまで。
    変数 テーブル背景色＝DOM部品オプション.テーブル背景色。
    テーブル背景色＝テーブル背景色をJSONエンコード。
    テーブルの「背景色」にテーブル背景色をデータ属性設定。
    変数 アイテム＝空配列。
    変数 全行＝テーブルの「tr」をDOM子要素全取得。
    全行を反復:
        変数 行＝対象キー。
        もし、行＝０ならば、:
            行セル＝対象の「th」をDOM子要素全取得。
        違えば、:
            行セル＝対象の「td」をDOM子要素全取得。
        アイテム[行]＝空配列。
        行セルを反復:
            列＝対象キー。
            アイテム[行][列]＝対象.textContent。
    テーブルの「アイテム」にアイテムをJSONエンコードをデータ属性設定。
ここまで。

＃オプション設定
＃＃編集
●(テーブルの)テーブル編集可能
    テーブルの「編集」をデータ属性取得。
    もし、それがオンならば戻る。
    テーブルの「編集」にオンをデータ属性設定。

変数 全セル＝テーブルの「td」をDOM子要素全取得。
    全セルを反復。テーブルの対象に編集可能セル設定処理。。。

# セル内の改行入力を禁止する。
    テーブルのキー押した時には、:
        もし、押されたキー＝「Enter」ならば、:
            対象イベントのDOMイベント処理停止。
            セル＝DOCUMENT.activeElement。
            セルの「blur」を空でJSメソッド実行。
ここまで。

＃＃行選択
●(テーブルの)テーブル行選択可能
    テーブルの「行選択」をデータ属性取得。
    もし、それがオンならば戻る。
    テーブルの「行選択」にオンをデータ属性設定。

テーブルの「前クリックセル」に空をDOM属性設定。
    変数 選択行色＝テーブル拡張オプション.選択行色。
    テーブルの「選択行色」に選択行色をデータ属性設定。

テーブルをマウス押した時には、:
        もし、対象.nodeName＝「TD」ならば、:
            変数 クリック行＝対象.parentNode。
            変数 テーブル＝クリック行.parentNode。
            変数 行色情報＝テーブルの「背景色」をデータ属性取得して、JSONデコード。
            変数 選択行色＝テーブルの「選択行色」をデータ属性取得。
            変数 前クリックセル＝テーブルの「前クリックセル」をDOM属性取得。
            もし、前クリックセルが空でなければ、:
                変数 前行数＝前クリックセルのセル行番号。
                変数 前クリック行＝前クリックセル.parentNode。
                変数 前背景色＝行色情報[前行数%2+1]。
                前クリック行の「背景色」に前背景色をDOMスタイル設定。
            クリック行の「背景色」に選択行色をDOMスタイル設定。
            テーブル.前クリックセル＝対象。
ここまで。

＃＃セル幅変更
●(テーブルの)テーブルセル幅変更可能
    テーブルの「セル幅変更」をデータ属性取得。
    もし、それがオンならば戻る。
    テーブルの「セル幅変更」にオンをデータ属性設定。

# ヘッダの設定
    変数 全ヘッダ＝テーブルの「th」をDOM子要素全取得。
    変数 母艦＝DOM親要素。
    全ヘッダを反復:
        # ヘッダの余白サイズを調べ、ヘッダの余白は0にする。
        WINDOWの「getComputedStyle」を対象でJSメソッド実行。
        変数 余白サイズ＝それ.padding。//.余白 //できない
        変数 最小幅＝それ.width。
        対象.余白＝0。
        # ヘッダのテキストを新しく作ったdivの中にうつす
        変数 テキスト＝対象のテキスト取得。
        対象に空をテキスト設定。
        対象にDOM親部品設定。
        「div」のDOM部品作成。
        それにテキストをテキスト設定。
        # リサイズの設定。ヘッダの余白をうつす
        それに{
            "resize":"horizontal",
            "overflow":"hidden",
            "white-space":"nowrap",
            "min-width":最小幅,
            "余白":余白サイズ
        }をDOMスタイル一括設定。
    母艦にDOM親部品設定。
ここまで。

＃＃自動ソート
●(テーブルの)テーブル自動ソート可能
    テーブルの「自動ソート」をデータ属性取得。
    もし、それがオンならば戻る。
    テーブルの「自動ソート」にオンをデータ属性設定。
    テーブルの「昇順」に、はいをデータ属性設定。

変数 全ヘッダ＝テーブルの「th」をDOM子要素全取得。
    変数 母艦＝DOM親要素。
    全ヘッダを反復:
        変数 記号表示場所＝対象。
        もし、対象.firstChild.tagName＝「DIV」ならば、記号表示場所＝対象.firstChild。
        記号表示場所にDOM親部品設定。
        空のラベル作成。
        それに{
            "margin-left":"0.5em",
            "vertical-align":"middle",
            "font-size":"0.7em",
            "色":灰色
        }をDOMスタイル一括設定。
    母艦にDOM親部品設定。
    テーブルをクリックした時には、
        # 三角のラベルをクリックした時も動くようにする
        もし、(対象.nodeName＝「TH」)または(対象.nodeName＝「SPAN」)または(対象.nodeName＝「DIV」)ならば、:
            変数 セル＝対象。
            もし、(対象.nodeName＝「SPAN」)または(対象.nodeName＝「DIV」)ならば、セル＝対象.parentNode。
            変数 テーブル＝セル.parentNode.parentNode。
            変数 アイテム＝テーブルのテーブルアイテム取得。
            変数 昇順＝テーブルの「昇順」をデータ属性取得。
            変数 ソート列＝セルのセル列番号。
            変数 ヘッダ＝アイテムの0を配列切り取り。
            アイテムのソート列を表ソート。
            もし、昇順＝はいでなければ、アイテムを配列逆順。
            テーブルの[1,0]をアイテムにテーブルセル変更。
            アイテムの0へヘッダを配列挿入。
            変数 記号＝「▼」
            もし、昇順=はいならば、記号＝「▲」
            昇順=昇順*-1。
            テーブルの「昇順」に昇順をデータ属性設定。            
            変数 全記号欄＝テーブルの「SPAN」をDOM子要素全取得。
            全記号欄を反復
                もし、対象キー＝ソート列ならば、
                    対象に記号をテキスト設定。
                違えば、
                    対象に空をテキスト設定。
                ここまで。
            ここまで。
            テーブルの「アイテム」にアイテムをJSONエンコードをデータ属性設定。
    ここまで。
ここまで。

＃拡張命令
●(テーブルに)テーブル行追加
    変数 元テーブル背景色＝DOM部品オプション.テーブル背景色。
    DOM部品オプション.テーブル背景色＝テーブルの「背景色」をデータ属性取得して、JSONデコード。
    変数 アイテム＝テーブルのテーブルアイテム取得。
    変数 空行＝空配列。追加行＝アイテムの表行数。
    アイテムの表列数回。空行に空を配列追加。。。
    テーブルの[アイテムの表行数,0]を[空行]にテーブルセル変更。
    # 追加された行の全セルに編集可能設定を付ける
    アイテム[追加行]＝空配列。
    アイテムの表列数回:
        アイテム[追加行][回数-1]＝空。
        セル＝テーブルから[追加行,回数-1]のテーブルセル取得。
        テーブルの「編集」をデータ属性取得
        もし、それがオンならば、:
            テーブルのセルに編集可能セル設定処理。
    テーブルの「アイテム」にアイテムをJSONエンコードをデータ属性設定。
    DOM部品オプション.テーブル背景色＝元テーブル背景色。
ここまで。

●(テーブルの)テーブルアイテム取得
    テーブルの「アイテム」をデータ属性取得。
    それをJSONデコードして戻す。
ここまで。

●(テーブルの)テーブル背景色取得
    テーブルの「背景色」をデータ属性取得。
    それをJSONデコードして戻す。
ここまで。

＃通常のテーブルにも使える命令
●(テーブルの行列を色に)セル文字色変更
    テーブルから行列のテーブルセル取得。
    それ.色＝色。
ここまで。

●(テーブルの行列を色に)セル背景色変更
    テーブルから行列のテーブルセル取得。
    それ.背景色＝色。
ここまで。

＃＃要素の取得
●(テーブルから行列の)テーブルセル取得
    変数 [行,列]＝行列。
    テーブル["rows"][行]["cells"][列]を戻す。
ここまで。

●(テーブルから行の)テーブル行取得
    テーブル["rows"][行]を戻す。
ここまで。

＃＃セル番号
●(セルの)セル行番号
    セル.parentNode.rowIndexを戻す。
ここまで。

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

＃下請け
＃＃編集と行追加
●(テーブルのセルに)編集可能セル設定処理
    セルに{
            "text-overflow":"ellipsis",
            "overflow":"hidden",
            "white-space":"nowrap",
            "max-width":"none"
    }をDOMスタイル一括設定。
    # 最初のセルからセルの高さを取得
    WINDOWの「getComputedStyle」を(テーブルから[1,0]のテーブルセル取得)でJSメソッド実行。
    変数 セル高さ＝それ.height。//セル高さを表示。
    セルの「高さ」にセル高さをDOMスタイル設定。
    セル.contentEditable＝true。# 編集可能にする
    セルの「focus」がDOMイベント発火した時には、:
        もし、対象.nodeName＝「TD」ならば、:
            テーブル＝対象.parentNode.parentNode。
            テーブルの「セル幅変更」をデータ属性取得。
            もし、それがオンならば、:
                対象の「max-width」に「none」をDOMスタイル設定。
    セルの「blur」がDOMイベント発火した時には、:
        もし、対象.nodeName＝「TD」ならば、:
            テーブル＝対象.parentNode.parentNode。
            # 改行を含むコピペ対策
            変数 テキスト＝対象.textContent。
            対象にテキストをテキスト設定。
            # テーブル数値右寄せ
            もし、DOM部品オプション.「テーブル数値右寄せ」＝trueならば、
                テキストを数列か判定。
                もし、それがtrueならば、
                    対象の「行揃え」に「右」をDOMスタイル設定。
                違えば、
                    対象の「行揃え」に「左」をDOMスタイル設定。
                ここまで。
            ここまで。
            # セルの内容をデータに反映
            変数 行＝対象のセル行番号。
            変数 列＝対象のセル列番号。
            変数 アイテムはテーブルのテーブルアイテム取得。
            もし、(アイテムの表行数)≦行ならば、アイテム[行]＝空配列。
            アイテム[行][列]＝テキスト。
            テーブルの「アイテム」にアイテムをJSONエンコードをデータ属性設定。
            テーブルの「セル幅変更」をデータ属性取得
            もし、それがオンならば、:
                変数 ヘッダ＝テーブルから[0,列]のテーブルセル取得
                変数 リサイズ＝ヘッダ.firstChild
                WINDOWの「getComputedStyle」をヘッダでJSメソッド実行。
                変数 幅＝それ.width。幅＝幅の「px」を空に置換。
                変数 余白＝リサイズ.余白。余白＝余白の「px」を空に置換。
                幅＝「{幅-余白*2}px」
                リサイズ.幅＝幅。
                対象の「max-width」に0をDOMスタイル設定。
ここまで。

＃以下はテスト
もし、プラグイン名＝「メイン」ならば、
    # テーブルを作成
    DOM部品オプション.テーブル背景色＝["#AA4040","#ffffff","#fff0f0"]。
    テストテーブル＝「名前,ふりがな,点数
    太郎,たろう,55
    花子,はなこ,100
    一郎,いちろう,80」のテーブル作成。

# 拡張設定
    テストテーブルにテーブル拡張設定。

# セルの色変更
    テストテーブルの[0,2]を黄色にセル背景色変更。
    テストテーブルの[0,2]を赤色にセル文字色変更。

# アイテム取得
    確認ボタンは「データ確認」のボタン作成。
    確認ボタンをクリックした時には、
        テストテーブルのテーブルアイテム取得してJSONエンコードして表示。
    ここまで。

# 行追加
    追加ボタンは「一行追加」のボタン作成。
    追加ボタンをクリックした時には、
        テストテーブルにテーブル行追加
    ここまで。
    改行作成。改行作成。

＃二つ目
    DOM部品オプション.テーブル背景色 = [青色,緑色,赤色]
    # オプションの設定
    テーブル拡張オプション.選択行色＝黄色。
    テーブル拡張オプション.セル幅変更＝オフ。
    テーブル拡張オプション.編集＝オフ。
    「◎色を変えて編集とセル幅変更をオフにしました」のラベル作成。
    テスト＝「名前,年齢
    桃太郎,98
    さる太郎,87
    きじ次郎,77」のテーブル作成。
    テストにテーブル拡張設定。

ここまで。

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ