今回は、Meseus社のJavascript製フレームワーク「Wijmo(ウィジモ)」を使ったサンプルコードをHTMLとjavascriptで作ってみました。
（といっても、公式HPのサンプルをそのまま映しただけですが...）
URL:https://demo.mescius.jp/wijmo/demos/Grid/Merging/CustomMerging/purejs
少しだけ手を加えた点を伝えておきます。
【ちょっと手を加えた点】
JavascriptのモジュールをImportしないで実装したところ
⇒これによってクローズな環境でも実装可能になります。
※WijmoライブラリはCDN経由でライブラリをダウンロードしておいてください。
完成したレイアウト
サンプルコード
まずは、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社さん、ありがとう！！