如何以列標題為鍵以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;
}