web-dev-qa-db-ja.com

列ヘッダーをキーとして、JSON形式のHandsonテーブルデータを取得する方法

Handsontableがあり、handsontableセルからサーバー側にデータを入力したい。以下のコードを実行しようとしましたが、データが予期された形式ではありません。キーとしての列ヘッダーとして純粋な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,
       });
   });

ハンズオンテーブルから情報を抽出するためのコード

   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は列ヘッダーです。

javascriptjqueryjsonhandsontable
14
user4736585

すぐに答えを見つけられなかった他の人は、上記の@ hakuna1811のコメントを参照してください。Handsontableのバージョン0.20.0以降、.getSourceData()データを指定したのと同じ形式（オブジェクトの配列など）で取得する場合は、代わりにcallを使用する必要があります。 .getData()呼び出しの動作が変更された理由は明確ではなく、@ hakuna1811のコメントに記載されている関連する GitHubの問題 では説明されていませんが、少なくとも実用的な解決策があります-ありがとうもう一度@ hakuna1811に答えを求めてください。これにより、多くのハンティングが節約されました。

15
bluebinary

それはあなたがそれを期待しているのは素晴らしいことですが、それはその関数がどのように機能するかではありません：P

実際に必要なものは次のとおりです。

まず、dataオプションを設定した場所は表示されません。これを見ると fiddle 、私は別の表記法を使用して、dataの形式を指定できるHandsontableオブジェクトを生成します。

dataの表示方法が、行オブジェクトの配列として指定されている場合、各オブジェクトは記述した形式であり、hot1.getData（）メソッドは期待どおりの結果を返します。

現状では、使用しているデータ形式がわからないので、HOTをインスタンス化するこの方法を採用するか、どのように実行しているかを示します。

幸運を！

5
ZekeDroid

結果をマッピングする必要があります。 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
1
Moch Lutfi