У меня настроена следующая конфигурация handsontable:
var container = document.getElementById('example1'),
hot;
var data = [];
for (var i = 0; i < 100; i++) {
data.push({"id": 1, "rgba": "204,255,204,1"});
}
function callback (row, column, prop) {
const cellProperties = {};
cellProperties.renderer = renderer;
return cellProperties;
}
function renderer (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
var rdata = instance.getSourceDataAtRow(row);
var colour = rdata.rgba;
td.style.backgroundColor = 'rgba(' + colour + ')';
}
hot = new Handsontable(container, {
data: data
, cells: callback
// adding either of these in isolation allows the rendering to continue working. However adding both together causes only the top row to render correctly.
, hiddenColumns: true
, colWidths: 150
});
С работающим примером, приведенным по следующей ссылке: https://jsfiddle.net/JoshAdams/sgLm5ev2/
Проблема, с которой я сталкиваюсь, Мой пользовательский рендерер предназначен для установки цветов фона каждой строки, определяемой вручную, на основе значения в столбце rgba. Первоначально это работает нормально.
Однако, когда введены оба свойства hiddenColumns: true и colWidths: 150 (или любое число), это вызывает проблему, из-за которой только верхний ряд handsontable будет отображаться правильно.
Но добавление любого из этих свойств в отдельности позволяет правильно отображать данные.
Так кто-нибудь знает, почему это происходит и как это исправить?
Примечание
Хотя простой вызов hot.render () решает проблему, на самом деле это не решение, так как это приводит к дополнительным ненужным визуализациям рабочих столов, что приводит к значительному снижению производительности в больших таблицах.