如何以列标题为键以json格式获取handson表数据

Question

我有手持设备，我想将手持设备上的数据输入到服务器端。 我试图在代码下面运行，但数据不是预期的格式。 我期望以纯 json 格式获取数据作为列标题作为键。

html代码

<div class="handsontable" id="example"></div>
<input type="button" name="submit" value="submit" onclick="submitForm()" />

创建handsontable的代码

   $(document).ready(function () {
       $('#example').handsontable({
           startRows: 2,
           startCols: 2,
            rowHeaders: true,
            colHeaders: true,
            contextMenu: true,
       });
   });

从handsontable中提取信息的代码

   function submitForm(){
        var $container = $('#example');
        var htContents = JSON.stringify($container.handsontable('getData'));
        alert(htContents);
    }

目前handsontable有2行2列。 现在，如果我按下单元格值 (1,1)=11,(1,2)=12,(2,1)=21 和 (2,2)=22 的按钮，我得到的结果是在警报窗口中

[["11","12"],["21","22"]]

但我期待的结果是

 [{"A":"11","B":"12"},{"A":"21","B":"22"}] 

其中 A 和 B 是列标题。

Answer 1

对于其他没有立即发现答案的人，请参阅上面@hakuna1811 的评论，因为从 Handsontable 的 0.20.0 版开始，如果您想以与提供的格式相同的格式恢复数据，则应.getSourceData()调用- 例如作为对象数组。 目前尚不清楚为什么.getData()调用的行为被修改，并且在@hakuna1811 评论中提到的相关GitHub 问题中没有解释，但至少我们有一个可行的解决方案 - 再次感谢 @hakuna1811 的回答 - 它保存了很多狩猎！

Answer 2

太好了，您期待这样，但这不是该功能的工作方式：P

这是你真正想要的：

首先，您不会向我们展示您设置data选项的位置。 如果您查看这个小提琴，我会使用不同的表示法生成一个 Handsontable 对象，该对象允许我指定data的格式。

如果data以我的方式显示，作为行对象数组，其中每个对象采用您描述的格式，那么 hot1.getData() 方法将返回您期望的内容。

就目前而言，我不知道您使用的是什么数据格式，因此要么采用这种实例化 HOT 的方式，要么向我们展示您是如何做的。

祝你好运！

Answer 3

您需要映射结果。 让我们假设htContents是包含[["11","12"],["21","22"]]变量

function buildObject(data) {
    return {
         'A': data[0], 
         'B': data[1]
    };
}
var newResult = htContents.map(buildObject); // newResult must be expected data

Answer 4

getSourceData()方法返回所需的格式，但不会反映屏幕上看到的正确的行和列顺序。 以下打字稿代码对我有用：

protected getVisualTableData(): object[] {
    const tableData = [];
    for (let i = 0; i < this.hot.countRows(); i++) {
        tableData.push(this.visualObjectRow(i));
    }
    return tableData;
}

protected visualObjectRow(row: number): object {
    const obj = {};
    for (let i = 0; i < this.hot.countCols(); i++) {
        obj[this.hot.colToProp(i)] = this.hot.getDataAtCell(row, i);
    }
    return obj;
}