テーブル拡張プラグイン

ライブラリ
関数一覧

関数名	引数	説明
テーブル拡張設定	テーブルに
テーブル編集可能	テーブルの
テーブル行選択可能	テーブルの
テーブルセル幅変更可能	テーブルの
テーブル自動ソート可能	テーブルの
テーブル行追加	テーブルに
テーブルアイテム取得	テーブルの
テーブル背景色取得	テーブルの
セル文字色変更	テーブルの行列を色に
セル背景色変更	テーブルの行列を色に
テーブルセル取得	テーブルから行列の
テーブル行取得	テーブルから行の
セル行番号	セルの
セル列番号	セルの
編集可能セル設定処理	テーブルのセルに
ソース
プログラム

ソースを表示
/*-------------------------------------------
【テーブル＋】　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」のテーブル作成。
    テストにテーブル拡張設定。

ここまで。
作品について
作品情報

作品を編集
雪乃☆雫作
ライセンス: CC0（著作権破棄）
形式: wnako
タグ: アドベントカレンダー2024, プラグイン
利用バージョン: 3.6.39
アクセス数(累計): 310
アクセス数(今月): 24
バグ報告: 0件
更新日時: 2024/12/25 18:09 編集: 2024/12/27 09:11
⭐⭐⭐
作品公開情報
交流
テーブル拡張プラグイン

関数一覧

プログラム

作品情報

コメント
