Handsontable 自定义对象数据答案

【问题标题】：Handsontable custom object dataHandsontable 自定义对象数据
【发布时间】：2015-10-12 08:56:31
【问题描述】：

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

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

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

【问题讨论】：

您查看过object data source with column mapping 文档吗？另外，您能否为您的示例工作提供一个小提琴？
是的，请查看文档，这是一个非常简单的用例，有大量文档，应该像谷歌搜索一样简单。

标签： object handsontable

【解决方案1】：

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;
        };
    },
    ...
});

【讨论】：

【解决方案2】：

handsontable 数据并非旨在为单元格提供样式。要定义单元格样式，我建议您使用此链接

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>

【讨论】：