この記事を書こうと思った背景
Meceus社の国産Javascriptフレームワーク「Wijmo」のGridを使った情報があまりにも少ないため困っている人たちへ、そして自分への備忘録として書いてます。
完成イメージ図はこちら
【解説】
グリッドの変更したいリンクを選択すると、Bootstrapのモーダルウィンドウがふわっと出てきて、モーダル画面でリンク名を変更すると呼び出し元のリンク名が変更されているというサンプル。
１．変更したいリンクの選択する
２．モーダルの表示する
３．リンク名の変更する
４．グリッドのリンクが変更されている
さっそくソースコードを公開
Wijmoライブラリは、CDNまたはお手持ちのライブラリどちらでも構いません。
(ただし、Versionがあまりにも古いと実装できなくなる可能性があるので、なるべく最新版を使うことを強くお勧めします。)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Gridのラジオボタン</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>-->
<!--<script src="./js/bootstrap.min.js"></script>-->
<!-- Wijmoのスタイルとコア（必須） -->
<!--<link href="https://cdn.mescius.com/wijmo/5.20241.9/styles/wijmo.min.css" rel="stylesheet"/>-->
<!--
必要に応じて、wijmo.min.cssの代わりにカスタムテーマを使用する
<link href="https://cdn.mescius.com/wijmo/5.20241.9/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/>
-->
<!--<script src="https://cdn.mescius.com/wijmo/5.20241.9/controls/wijmo.min.js"></script>-->
<!-- Wijmoコントロール（オプション。必要なコントロールを含める） -->
<!--<script src="https://cdn.mescius.com/wijmo/5.20241.9/controls/wijmo.grid.min.js"></script>-->
<!--<script src="https://cdn.mescius.com/wijmo/5.20241.9/controls/wijmo.chart.min.js"></script>-->
<!--<script src="https://cdn.mescius.com/wijmo/5.20241.9/controls/wijmo.input.min.js"></script>-->
<!--<script src="https://cdn.mescius.com/wijmo/5.20241.9/controls/wijmo.gauge.min.js"></script>-->
<!-- Wijmoカスタムカルチャー（オプション。必要なカルチャーを含める） -->
<!--<script src="https://cdn.mescius.com/wijmo/5.20241.9/controls/cultures/wijmo.culture.ja.min.js"></script>-->
<link href="./lib/bootstrap.min.css" rel="stylesheet"/>
<script src="./lib/bootstrap.min.js"></script>
<link rel="stylesheet" href="./lib/wijmo.css"/>
<script src="./lib/wijmo.min.js"></script>
<script src="./lib/wijmo.grid.min.js"></script>
<script src="./lib/wijmo.input.min.js"></script>
<script src="./lib/wijmo.culture.ja.min.js"></script>
<script src="./lib/wijmo.chart.min.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
<div id="FlexGrid"></div>
<div id="myModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="modal-body-text">
<input type="text" id="modal-input"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="saveChangesBtn">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
index.js
window.onload = function() {
var grid = new wijmo.grid.FlexGrid('#FlexGrid');
grid.itemsSource = createData(20);
grid.columns[0].isReadOnly = true;
grid.columns[0].allowSorting = false;
grid.columns[0].width = 50;
var selectData = -1;
var currentLink;
grid.itemFormatter = function(panel, r, c, cell) {
if (panel.cellType == wijmo.grid.CellType.Cell && c == 0) {
// 1列目にラジオボタンを配置します
cell.innerHTML = '<div style="text-align:center">' + '<input type="radio" name="envId">' + '</div>';
var radio = cell.children[0];
if (grid.getCellData(r, c) == selectData) {
radio.childNodes[0].checked = true;
}
}
if (panel.cellType == wijmo.grid.CellType.Cell && c == 1) {
// 2列目にリンクを配置します
cell.innerHTML = '<div style="text-align:center">' + '<a href="#" name="envId">' + cell.innerHTML + '</a>' + '</div>';
var link = cell.children[0].children[0];
link.addEventListener('click', function(e) {
e.preventDefault();
currentLink = link;
var modalInput = document.getElementById('modal-input');
modalInput.value = link.innerHTML;
var modal = new bootstrap.Modal(document.getElementById('myModal'));
modal.show();
});
}
};
document.getElementById('saveChangesBtn').addEventListener('click', function() {
var modalInput = document.getElementById('modal-input');
currentLink.innerHTML = modalInput.value;
var modal = bootstrap.Modal.getInstance(document.getElementById('myModal'));
modal.hide();
});
grid.hostElement.addEventListener('change', e => {
if (e.target instanceof HTMLInputElement && e.target.type == 'radio' && e.target.name == 'envId') {
selectData = grid.getCellData(grid.selection.row, 0, false);
}
});
grid.hostElement.addEventListener('keydown', function(e) {
if (e.keyCode == 32) {
var selectedCellRange = grid.selection;
if (selectedCellRange.col == 0) {
// スペースキー押下時にラジオボタンをチェックします
selectData = grid.getCellData(selectedCellRange.row, selectedCellRange.col);
grid.refresh();
}
}
});
function createData(count) {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < count; i++) {
data.push({
select: i,
id: i + 1,
country: countries[i % countries.length],
date: new Date(2014, i % 12, i % 28),
amount: Math.random() * 10000,
active: i % 4 == 0
});
}
return data;
}
}
以上です。
良かったら試してみてください。