セージ の メモ書き

メモこそ命の恩人だ

ASP.NET - Handsontable

Handsontable(ハンズオンテーブル)

  • Excel ライクなテーブルを表示できる。
  • HandsOn:実践、体験学習
  • バージョン 7 以上の場合、有償。(非商用なら無償)
  • バージョン 6 以下の場合、MITライセンス
  • なので、商用利用する場合、バージョン 6.6.2 がお勧め。
  • hotId:HandsOnTableId の略。

セットアップ

  • cdnjs で公開
  • LibMan より以下の内容でインストール
    • プロバイダ:cdnjs
    • ライブラリ:handsontable@6.2.2
    • "ライブラリのすべてのファイルを含める" を選択
    • ターゲットの場所:wwwroot/lib/handsontable/
{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "handsontable@6.2.2",
      "destination": "wwwroot/lib/handsontable/"
    }
  ]
}
  • _Layout.cshtml に以下を追加

CSS 部分

<link rel="stylesheet" href="~/lib/handsontable/handsontable.full.css" />
<link rel="stylesheet" href="~/lib/handsontable/handsontable.full.min.css" asp-append-version="true" />

JavaScript 部分

<script src="~/lib/handsontable/handsontable.full.js"></script>
<script src="~/lib/handsontable/handsontable.full.min.js" asp-append-version="true"></script>


使用方法

はじめに

  • div タグ部分にテーブルを表示する。
  • script タブ内に、Handsontable オブジェクトを生成する。
new Handsontable(divのDOMデータ, { data: 表示データ });

index.cshtml を修正し、テーブルが表示されたことを確認。

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <div id="grid"></div>
</div>

@section scripts {
    <script>
        var data = [
            { id: 1, name: "顧客1", age: 30 },
            { id: 2, name: "顧客2", age: 35 },
            { id: 3, name: "顧客3", age: 40 },
        ];
        var grid = document.getElementById('grid');
        new Handsontable(grid, { data: data });
    </script>
}

カラムの表示

  • columns の設定を行う。
  • 2パターンの書き方がある。
    • 方法1:columns と colHeaders の定義
    • 方法2:columns に title 属性
  • 定義の順序により、表示順を変更できる。
new Handsontable(divのDOMデータ, { 
    data: 表示データ, 
    columns:[
        {data: プロパティ名1},
        {data: プロパティ名2},
        {data: プロパティ名3},
    ],
    colHeaders: [
        "ヘッダー名1",
        "ヘッダー名2",
        "ヘッダー名3"
    ]
});

こんな感じ。

<script>
    var data = [
        { id: 1, name: "顧客1", age: 30 },
        { id: 2, name: "顧客2", age: 35 },
        { id: 3, name: "顧客3", age: 40 },
    ];
    var grid = document.getElementById('grid');
    new Handsontable(grid, {
        data: data,
        columns: [
            { data: "id" },
            { data: "name" },
            { data: "age" },
        ],
        colHeaders: [
            "ID",
            "氏名",
            "年齢",
        ]
    });
</script>

title 属性でもOK。

<script>
    var data = [
        { id: 1, name: "顧客1", age: 30 },
        { id: 2, name: "顧客2", age: 35 },
        { id: 3, name: "顧客3", age: 40 },
    ];
    var grid = document.getElementById('grid');
    new Handsontable(grid, {
        data: data,
        columns: [
            { data: "id", title: "ID" },
            { data: "name", title: "氏名" },
            { data: "age", title: "年齢" },
        ]
    });
</script>

読取専用

  • カラム単位に設定する場合、columns に readOnly を指定する。
  • 一括指定する場合、第一階層のプロパティに readOnly を指定する。
  • 読取専用の場合、文字が薄い。CSS で変更できるらしい。
    • .handsontable .htDimmed
new Handsontable(divのDOMデータ, { 
    data: 表示データ, 
    columns:[
        {data: プロパティ名1, readOnly: true },
        {data: プロパティ名2},
        {data: プロパティ名3},
    ],
    colHeaders: [
        "ヘッダー名1",
        "ヘッダー名2",
        "ヘッダー名3"
    ]
});
new Handsontable(divのDOMデータ, { 
    data: 表示データ, 
    columns:[
        {data: プロパティ名1},
        {data: プロパティ名2},
        {data: プロパティ名3},
    ],
    colHeaders: [
        "ヘッダー名1",
        "ヘッダー名2",
        "ヘッダー名3"
    ],
    readOnly: true
});

各種設定

Handsontable [八寿のナレッジベース]

とりあえず書きなぐる

  • manualColumnResize:列の幅調整の有無
    • true:調整可
    • false:調整不可(既定値)
  • manualRowResize: 行の幅調整の有無
    • true:調整可
    • false:調整不可(既定値)
    • ※ 行ヘッダーを表示中の場合のみ調整できる。
  • rowHeaders:行ヘッダーの表示有無
    • true:表示
    • false:非表示(既定値)
  • columnSorting:ソート有無
    • true:ソートあり
    • false:ソートなし(既定値)
    • ※ true の場合、カラム名のクリックでソートできた。
  • sortIndicator:現在のソート方向の表示有無
    • true:表示
    • false:非表示(既定値)
  • stretchH:表の幅設定
    • all:表を画面全体に表示
  • disableVisualSelection:選択範囲
    • area:複数セルの選択を抑止



以上