Handsontable 自定义 object 数据

Question

我正在尝试用 objects 填充 Handsontable。例如：

var data = [
    [{title: 'A1', style: '...'}, {title: 'B1', style: '...'}],
    [{title: 'A2', style: '...'}, {title: 'B2', style: '...'}],
];

现在我希望 Handsontable 只将标题属性呈现到单元格中而不是样式中。 style 属性用于呈现具有特殊格式的单元格。如何告诉 Handsontable 只使用标题属性？

Answer 1

handsontable 数据并非旨在为单元格提供样式。要定义单元格样式，我建议您穿这个 link

http://docs.handsontable.com/0.15.1/demo-conditional-formatting.html

但如果您的想法是隐藏列，例如代码，我将保留此示例

<script>

var options = {
 columns: CutObject(data)
}

function CutObject(data){
 return data.slice(1);//hide firt column
}

</script>

Answer 2

var data = [
    [{title: 'A1', style: '...'}, {title: 'B1', style: '...'}],
    [{title: 'A2', style: '...'}, {title: 'B2', style: '...'}],
];

var filterArrays = function (arys) {
    let ret = [];
    for (let i = 0; i < data.length; i++) {
        let ary = [];
        for (let j = 0; j < data[i].length; j++) {
            ary.push(data[i][j].title);
        }
        ret.push(ary);
    }
    return ret;
}

var titles = filterArrays(data);

这里的标题可以是

titles = [
    ['A1', 'B1'],
    ['A2', 'B2']
];

因此，您可以使用标题作为数据。并为每个单元格设置样式，请检查以下内容。

hot = new Handsontable(container, {
    data: titles,
    ...
    cells: function (row, col, prop) {
        cellProperties.renderer = function (instance, td, row, col, prop, value, cellProperties) {
            Handsontable.renderers.TextRenderer.apply(this, arguments);
            td.style = data[row][col].style;
        };
    },
    ...
});

Handsontable 自定义 object 数据

Handsontable custom object data

object

handsontable