【Wijmo】グリッドを使ったカスタムセル結合を実装するサンプルコード

今回は、Meseus社のJavascript製フレームワーク「Wijmo(ウィジモ)」を使ったサンプルコードをHTMLとjavascriptで作ってみました。
（といっても、公式HPのサンプルをそのまま映しただけですが...）
URL:https://demo.mescius.jp/wijmo/demos/Grid/Merging/CustomMerging/purejs

少しだけ手を加えた点を伝えておきます。
【ちょっと手を加えた点】
JavascriptのモジュールをImportしないで実装したところ
⇒これによってクローズな環境でも実装可能になります。
※WijmoライブラリはCDN経由でライブラリをダウンロードしておいてください。

# 完成したレイアウト
![うぃじもー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1169664/316493d6-4b19-cc45-05c0-190d845549ed.png)



## サンプルコード

まずは、HTMLから↓

```index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 「5.latest」は最新バージョンを参照します。任意のバージョンで動作させる場合は「5.latest」の個所を変更してください。 -->
    <!-- Wijmoのスタイル（必須） -->
    <link href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet" />
    <!-- Wijmoのコアモジュール（必須） -->
    <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
    <!-- Wijmoコントロール（オプション。必要なコントロールを設定する） -->
    <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js" type="text/javascript"></script>
    <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
    <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js" type="text/javascript"></script>
    <!-- Wijmoカスタムカルチャー（オプション。任意のカルチャーを設定する） -->
    <script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>
    <script type="text/javascript" src="./index.js"></script>
</head>

<body>

    <div class="container-fluid">
        <div id="theGrid"></div>
    </div>
</body>
</html>
```

つづいて、Javascriptのコード↓
```index.js

class CustomMergeManager extends wijmo.grid.MergeManager {
    getMergedRange(panel, r, c, clip = true) {
        //
        // create basic cell range
        var rng = new wijmo.grid.CellRange(r, c);
        //
        // expand left/right
        for (var i = rng.col; i < panel.columns.length - 1; i++) {
            if (panel.getCellData(rng.row, i, true) != panel.getCellData(rng.row, i + 1, true))
                break;
            rng.col2 = i + 1;
        }
        for (var i = rng.col; i > 0; i--) {
            if (panel.getCellData(rng.row, i, true) != panel.getCellData(rng.row, i - 1, true))
                break;
            rng.col = i - 1;
        }
        //
        // expand up/down
        for (var i = rng.row; i < panel.rows.length - 1; i++) {
            if (panel.getCellData(i, rng.col, true) != panel.getCellData(i + 1, rng.col, true))
                break;
            rng.row2 = i + 1;
        }
        for (var i = rng.row; i > 0; i--) {
            if (panel.getCellData(i, rng.col, true) != panel.getCellData(i - 1, rng.col, true))
                break;
            rng.row = i - 1;
        }
        //
        // done
        return rng;
    }
}
function setData(p, r, cells) {
    if (p.cellType == wijmo.grid.CellType.Cell) {//if (p.cellType == wjGrid.CellType.Cell) {
        p.grid.rowHeaders.setCellData(r, 0, cells[0]);
    }
    for (var i = 1; i < cells.length; i++) {
        p.setCellData(r, i - 1, cells[i]);
    }
}
function centerCell(s, e) {
    if (e.cell.children.length == 0) {
        e.cell.innerHTML = '<div>' + e.cell.innerHTML + '</div>';
        wijmo.setCss(e.cell, {
            display: 'table',
            tableLayout: 'fixed'
        });
        wijmo.setCss(e.cell.children[0], {
            display: 'table-cell',
            textAlign: 'center',
            verticalAlign: 'middle'
        });
    }
}
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
    // create an unbound grid with 5 rows and 7 columns
    var theGrid = new wijmo.grid.FlexGrid('#theGrid');//
    while (theGrid.columns.length < 7) {
        theGrid.columns.push(new wijmo.grid.Column());//
    }
    while (theGrid.rows.length < 5) {
        theGrid.rows.push(new wijmo.grid.Row());
    }
    // configure the grid
    theGrid.mergeManager = new CustomMergeManager(theGrid);
    theGrid.formatItem.addHandler(centerCell);
    theGrid.rowHeaders.columns[0].width = 80;
    theGrid.rows.defaultSize = 40;
    theGrid.alternatingRowStep = 0;
    theGrid.isReadOnly = true;
    // populate the grid
    setData(theGrid.columnHeaders, 0, ',月,火,水,木,金,土,日'.split(','));
    setData(theGrid.cells, 0, '12:00,昼のニュース,昼のニュース,昼のニュース,スポーツ,天気予報,未定,未定'.split(','));
    setData(theGrid.cells, 1, '13:00,ワイドショー,ワイドショー,アニメ,サッカー,経済ニュース,未定,未定'.split(','));
    setData(theGrid.cells, 2, '14:00,ワイドショー,ワイドショー,アニメ,サッカー,ドラマ,未定,未定'.split(','));
    setData(theGrid.cells, 3, '15:00,ニュース,ニュース,ニュース,ニュース,ニュース,未定,未定'.split(','));
    setData(theGrid.cells, 4, '16:00,ニュース,ニュース,ニュース,ニュース,ニュース,未定,未定'.split(','));
}

```

以上です。

Wijmo最高～♪
Meseus社さん、ありがとう！！