特定の列全てを readOnly にする場合は、columns 定義で、readOnly = true を指定、
動的に任意のセルに対して readOnly = true を指定したければ、
先日のように、セルのメタ情報のreadOnly を true にして、render() 実行すれば良いが、
Handsontable readOnly セルの設定とコンテキストメニュー - Oboe吹きプログラマの黙示録
Renderer で、データの値によって readOnly を指定する場合は、以下のようにする。
var hot = new Handsontable(document.getElementById("table"), { data: Handsontable.helper.createSpreadsheetData(10, 3), rowHeaders: true, colHeaders: true, maxCols: 3, columns: [ { type:'text' }, { type:'text' }, { type:'text', renderer: function(hotInstance, td, row, column, prop, value, cellProperties) { var v = hotInstance.getDataAtCell(row, 0); // 1列目の値が、"A2" or "A4" ならば、readOnly if (v=='A2' || v=='A4'){ cellProperties.readOnly = true; } Handsontable.renderers.TextRenderer.apply(this, arguments); }, }, ], licenseKey: 'non-commercial-and-evaluation' });
上記の指定で興味深いのは、、
readOnly = true にする条件にあてはまらない行の1列目を、
条件に一致するように編集して変更した時、(6行目、1列目 'A6' → 'A2' に変更)
即座に上記 renderer が動いて readOnly になることである。
なお、renderer は、以下の表のとおり、type と renderer が対応していることに留意したい。
type | renderer |
autocomplete | Handsontable.renderers.AutocompleteRenderer |
base | Handsontable.renderers.BaseRenderer |
checkbox | Handsontable.renderers.CheckboxRenderer |
date | Handsontable.renderers.DateRenderer |
dropdown | Handsontable.renderers.DropdownRenderer |
html | Handsontable.renderers.HtmlRenderer |
numeric | Handsontable.renderers.NumericRenderer |
password | Handsontable.renderers.PasswordRenderer |
text | Handsontable.renderers.TextRenderer |
time | Handsontable.renderers.TimeRenderer |