テーブル拡張プラグイン 📖

なでしこさんのテーブル部品に編集、自ソート動、行選択、セル幅変更の機能を付与する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」のテーブル作成。 テストにテーブル拡張設定。 ここまで。