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

14 javascript jquery json handsontable

我有动手,我希望将数据输入到掌上电脑的服务器端.我试图在代码下面运行,但数据不是预期的格式.我期望以纯json格式获取数据作为列标题作为键.

Html代码

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

创建handontable的代码

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

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

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

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

[["11","12"],["21","22"]]
Run Code Online (Sandbox Code Playgroud)

但我期待的结果是

 [{"A":"11","B":"12"},{"A":"21","B":"22"}] 
Run Code Online (Sandbox Code Playgroud)

其中A和B是列标题.

blu*_*ary 13

对于没有立即发现答案的其他人,请参阅@ hakuna1811上面的评论,因为自从0.20.0版本的Handsontable后,.getSourceData()如果你想以你提供的格式恢复数据,那么应该使用该调用 - 例如as一个对象数组.目前尚不清楚为什么.getData()呼叫的行为被修改,并且在@ hakuna1811评论中提到的相关GitHub问题中没有解释,但至少我们有一个有效的解决方案 - 再次感谢@ hakuna1811的答案 - 它节省了大量的狩猎周围!


Zek*_*oid 5

那是你期待的那个很棒,但这不是那个功能的运作方式:P

这是你真正想要的:

对于初学者,您不会向我们显示您设置data选项的位置.如果你看这个小提琴,我使用不同的符号来生成一个Handsontable对象,它允许我指定格式data.

如果data我给出了如何显示它,作为一个行对象数组,其中每个Object都采用您描述的格式,那么hot1.getData()方法将返回您期望的内容.

就目前而言,我不知道你正在使用什么数据格式,所以要么采用这种方式实例化HOT,要么告诉我们你是如何做到的.

祝好运!

  • 从版本0.20.0开始,我们应该使用`.getSourceData()`来获取对象,而不是`.getData`,[github issue]中的详细信息(https://github.com/handsontable/handsontable/issues/2982) (9认同)