Question

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

Html代码

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

用于创建动手的代码

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

用于从掌上电脑中提取信息的代码

   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的按钮，我得到的结果是在警报窗口< / p>

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

但我期待的结果是

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

其中A和B是列标题。

Answer 1

对于那些没有立即发现答案的人，请参阅@ hakuna1811上面的评论，因为自从0.20.0版的Handsontable后，应该使用 .getSourceData() 来电相反，如果您希望以与提供的格式相同的格式恢复数据 - 例如作为对象数组。目前尚不清楚为什么.getData()来电的行为被修改了，@ hakuna1811评论中提到的相关GitHub issue没有解释，但至少我们有一个有效的解决方案 - 再次感谢@ hakuna1811的答案 - 它节省了很多狩猎！

Answer 2

你期待的那个很棒，但这不是那个功能的工作方式：P

这是你真正想要的：

对于初学者，您没有告诉我们您在哪里设置data选项。如果您查看此fiddle，我会使用不同的表示法生成一个Handsontable对象，该对象允许我指定data的格式。

如果给出data如何显示它，作为一个行对象数组，其中每个Object都采用您描述的格式，那么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;
}

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

4 个答案: