it技術:web開発:handsontable
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン次のリビジョン両方とも次のリビジョン | ||
it技術:web開発:handsontable [2018/09/22 23:06] – [列にボタン表示] yajuadmin | it技術:web開発:handsontable [2021/08/15 21:38] – yajuadmin | ||
---|---|---|---|
行 125: | 行 125: | ||
<code javascript> | <code javascript> | ||
- | var | + | let table = new Handsontable(grid, |
// changesには[[row, | // changesには[[row, | ||
行 132: | 行 132: | ||
for (var i = 0; i < changes.length; | for (var i = 0; i < changes.length; | ||
- | | + | |
// 編集と選択は対象外 | // 編集と選択は対象外 | ||
if (change[1] === ' | if (change[1] === ' | ||
行 150: | 行 150: | ||
<code javascript> | <code javascript> | ||
- | var | + | let table = new Handsontable(grid, |
afterValidate: | afterValidate: | ||
行 225: | 行 225: | ||
}; | }; | ||
- | var | + | let table = new Handsontable(grid, |
data: data, | data: data, | ||
columns: [ | columns: [ | ||
行 255: | 行 255: | ||
<code javascript> | <code javascript> | ||
- | var | + | let table = new Handsontable(grid, |
table.validateCells(function(isValid) { | table.validateCells(function(isValid) { | ||
行 276: | 行 276: | ||
<code javascript> | <code javascript> | ||
- | var | + | let table = new Handsontable(grid, |
function checkItem(item) { | function checkItem(item) { | ||
行 290: | 行 290: | ||
} | } | ||
- | var check0002 = function () { return checkItem(2) } | + | let check0002 = function () { return checkItem(2) } |
- | var check0003 = function () { return checkItem(3) } | + | let check0003 = function () { return checkItem(3) } |
// 非同期チェック処理 | // 非同期チェック処理 | ||
- | var promise = Promise.resolve(); | + | let promise = Promise.resolve(); |
promise | promise | ||
行 312: | 行 312: | ||
<code javascript> | <code javascript> | ||
- | var | + | let table = new Handsontable(grid, |
- | var result = { msg: '', | + | let result = { msg: '', |
- | var checkAllItem = function () { | + | let checkAllItem = function () { |
return new Promise(function (resolve, reject) { | return new Promise(function (resolve, reject) { | ||
table.validateCells(function (valid) { | table.validateCells(function (valid) { | ||
行 345: | 行 345: | ||
<code javascript> | <code javascript> | ||
- | var | + | let table = new Handsontable(grid, |
- | var isValid = table.getCellMeta(row, | + | let isValid = table.getCellMeta(row, |
if (isValid === false) { | if (isValid === false) { | ||
alert(" | alert(" | ||
行 365: | 行 365: | ||
<code javascript> | <code javascript> | ||
- | var selectedRow = 0; | + | let selectedRow = 0; |
- | var selectedCol = 0; | + | let selectedCol = 0; |
afterSelection: | afterSelection: | ||
行 380: | 行 380: | ||
<code javascript> | <code javascript> | ||
- | var | + | let table = new Handsontable(grid, |
table.selectCell(row, | table.selectCell(row, | ||
行 397: | 行 397: | ||
<script type=" | <script type=" | ||
- | | + | let grid = document.getElementById(' |
- | var table = new Handsontable(grid, | + | let table = new Handsontable(grid, |
data: [], | data: [], | ||
currentRowClassName: | currentRowClassName: | ||
行 411: | 行 411: | ||
<code javascript> | <code javascript> | ||
- | var | + | let table = new Handsontable(grid, |
- | var sel = table.getSelected(); | + | let sel = table.getSelected(); |
table.alter(' | table.alter(' | ||
</ | </ | ||
行 421: | 行 421: | ||
<code javascript> | <code javascript> | ||
- | var | + | let table = new Handsontable(grid, |
table.alter(' | table.alter(' | ||
行 431: | 行 431: | ||
<code javascript> | <code javascript> | ||
- | var | + | let table = new Handsontable(grid, |
- | for (var i = table.countRows() - 1; i >= 0; i--) { | + | for (let i = table.countRows() - 1; i >= 0; i--) { |
if (table.getDataAtCell(i, | if (table.getDataAtCell(i, | ||
{ | { | ||
行 446: | 行 446: | ||
<code javascript> | <code javascript> | ||
- | var | + | let table = new Handsontable(grid, |
- | for (var i = 0; i < table.countRows() ; i++) { | + | for (let i = 0; i < table.countRows() ; i++) { |
table.setDataAtCell(i, | table.setDataAtCell(i, | ||
} | } | ||
行 455: | 行 455: | ||
その後に調査した結果、populateFromArrayで高速化できることが分かった。 | その後に調査した結果、populateFromArrayで高速化できることが分かった。 | ||
<code javascript> | <code javascript> | ||
- | var | + | let table = new Handsontable(grid, |
- | var col = table.propToCol(' | + | let col = table.propToCol(' |
table.populateFromArray(0, | table.populateFromArray(0, | ||
</ | </ | ||
行 479: | 行 479: | ||
loadData.addEventListener(' | loadData.addEventListener(' | ||
- | | + | |
- | for(var i = 0; i < hot1.countRows(); | + | for(let i = 0; i < hot1.countRows(); |
tab[i].shift(); | tab[i].shift(); | ||
tab[i].unshift(' | tab[i].unshift(' | ||
行 499: | 行 499: | ||
}; | }; | ||
- | var | + | let table = new Handsontable(grid, |
cells: function (row, col, prop) { | cells: function (row, col, prop) { | ||
- | if (this.instance.getData().length | + | if (this.instance.countRows() == 0) return; |
this.renderer = listRenderer; | this.renderer = listRenderer; | ||
}, | }, | ||
行 514: | 行 514: | ||
}; | }; | ||
- | var | + | let table = new Handsontable(grid, |
cells: function (row, col, prop) { | cells: function (row, col, prop) { | ||
- | if (this.instance.getData().length | + | if (this.instance.countRows() == 0) return; |
if (this.instance.getDataAtCell(row, | if (this.instance.getDataAtCell(row, | ||
this.renderer = listRenderer; | this.renderer = listRenderer; | ||
行 524: | 行 524: | ||
</ | </ | ||
+ | データ0件の判定処理で「this.instance.getData().length == 0」としていたが、これだとデータ件数が多くなると遅い原因(特にIE11は数分かかるレベル)となっていたため、「this.instance.countRows() == 0」に変更した。 | ||
==== セルの文字色を変更する ==== | ==== セルの文字色を変更する ==== | ||
結果列に「エラー」のセルのみを赤色の文字にする。\\ | 結果列に「エラー」のセルのみを赤色の文字にする。\\ | ||
行 536: | 行 537: | ||
}; | }; | ||
- | var | + | let table = new Handsontable(grid, |
cells: function (row, col, prop) { | cells: function (row, col, prop) { | ||
- | if (this.instance.getData().length | + | if (this.instance.countRows() == 0) return; |
this.renderer = listRenderer; | this.renderer = listRenderer; | ||
}, | }, | ||
行 553: | 行 554: | ||
縦幅は最低限表示するサイズ(150)と、最大で表示するサイズ(400)を指定している。 | 縦幅は最低限表示するサイズ(150)と、最大で表示するサイズ(400)を指定している。 | ||
<code javascript> | <code javascript> | ||
- | var resizeTimer; | + | let resizeTimer; |
- | var interval = Math.floor(1000 / 60 * 10); | + | let interval = Math.floor(1000 / 60 * 10); |
// リサイズ完了時 | // リサイズ完了時 | ||
行 568: | 行 569: | ||
// リサイズ | // リサイズ | ||
function resize() { | function resize() { | ||
- | | + | |
- | | + | |
// | // | ||
行 605: | 行 606: | ||
function time_list() { | function time_list() { | ||
list = []; | list = []; | ||
- | for (i = 0 ; i < 24; i++) { | + | for (let i = 0 ; i < 24; i++) { |
list.push((' | list.push((' | ||
} | } | ||
行 620: | 行 621: | ||
// ストアをプルダウンリスト | // ストアをプルダウンリスト | ||
function store_list() { | function store_list() { | ||
- | | + | |
jQuery.ajax({ | jQuery.ajax({ | ||
行 692: | 行 693: | ||
<code javascript> | <code javascript> | ||
- | var table = new Handsontable(grid, | + | let table = new Handsontable(grid, |
if (table.getSourceDataAtCell(row," | if (table.getSourceDataAtCell(row," | ||
行 705: | 行 706: | ||
* https:// | * https:// | ||
- | ==== 列にカスタムHTML表示 ==== | + | DateTimePickerの時間を組み合わせて、ボタンを押したら時間入力ダイアログを表示して時間をセットする。 |
+ | |||
+ | {{: | ||
+ | {{: | ||
+ | |||
+ | |||
+ | <code html> | ||
+ | <link href=" | ||
+ | <script src=" | ||
+ | <script src=" | ||
+ | |||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <div class=" | ||
+ | <button type=" | ||
+ | <span aria-hidden=" | ||
+ | </ | ||
+ | <div class=' | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <code javascript> | ||
+ | $('# | ||
+ | if(selectedCol === 0) return; | ||
+ | table.setDataAtCell(selectedRow, | ||
+ | }); | ||
+ | |||
+ | function myBtns(instance, | ||
+ | Handsontable.renderers.TextRenderer.apply(this, | ||
+ | if (value === null) value = " | ||
+ | td.innerHTML = '< | ||
+ | } | ||
+ | |||
+ | let table = new Handsontable(grid, | ||
+ | |||
+ | cells: function(row, | ||
+ | let cellPrp = {}; | ||
+ | if (col === 5) { | ||
+ | cellPrp.renderer = myBtns; | ||
+ | cellPrp.readOnly = true; | ||
+ | } | ||
+ | return cellPrp | ||
+ | }, | ||
+ | afterOnCellMouseDown: | ||
+ | if (event.realTarget.className.indexOf(' | ||
+ | return; | ||
+ | } | ||
+ | |||
+ | let time = table.getDataAtCell(selectedRow, | ||
+ | if (time === null) time = " | ||
+ | $('# | ||
+ | $('# | ||
+ | } | ||
+ | afterSelection: | ||
+ | // ボタンとかおしてフォーカスがGridから離れると | ||
+ | // getSelected() では取れなくなるので、 | ||
+ | // このタイミングで常に保持しておいたほうが無難 | ||
+ | selectedRow = r2; | ||
+ | selectedCol = c2; | ||
+ | } | ||
+ | |||
+ | } | ||
+ | </ | ||
+ | |||
+ | ==== セルにカスタムHTML表示 ==== | ||
HTMLを表示できるので、リンクや画像を表示できる。\\ | HTMLを表示できるので、リンクや画像を表示できる。\\ | ||
[[https:// | [[https:// | ||
行 715: | 行 782: | ||
<code javascript> | <code javascript> | ||
- | var data = [ | + | let data = [ |
{ " | { " | ||
{ " | { " |
it技術/web開発/handsontable.txt · 最終更新: 2021/09/18 02:05 by yajuadmin