入れ子になった配列を手作業で編集する

Question

私はhandsontableを使用しており、 "beforeChange"イベントと "afterChange"イベントが一貫して発生するのに問題があり、データベースの更新をコミットすることを望んでいます。私は、次のコード（バージョン0.16.1）を使用しています：

HTML：

<div id="table"></div> 
<div id="output"></div> 

はJavaScript：

var data = [{ 
    id: 5, 
    name: 'Sedan', 
    price: 2000, 
    tags: ['pink', 'purple'] 
}, { 
    id: 6, 
    name: 'Truck', 
    price: 1500, 
    tags: ['green', 'blue'] 
}, { 
    id: 6, 
    name: 'SUV', 
    price: 1500, 
    tags: null 
}]; 

var writeMessage = function(msg) { 
    var output = document.getElementById("output"); 
    var div = document.createElement('DIV'); 
    div.innerHTML = msg; 
    output.insertBefore(div, output.firstChild); 
    console.log(msg); 
}; 
var tableDiv = document.getElementById("table"); 
this.table = new Handsontable(tableDiv, { 
    data: data, 
    colHeaders: ["id", "name", "price", "tags"], 
    columns: [{ 
    data: "id" 
    }, { 
    data: "name" 
    }, { 
    data: "price" 
    }, { 
    data: "tags" 
    }], 
    beforeChange: function(changes, source) { 
    writeMessage("beforeChange: " + changes + ": " + source); 
    }, 
    afterChange: function(changes, source) { 
    writeMessage("After Change fired: " + changes); 
    if (!changes) { 
     return; 
    } 
    var i, idx, key, newVal, modelID; 
    for (i = 0; i < changes.length; i++) { 
     idx = changes[i][0]; 
     key = changes[i][1]; 
     newVal = changes[i][3]; 
     modelID = this.getDataAtRow(idx)[0]; 
     writeMessage("New value: " + key + ": " + newVal); 
    } 
    } 
}); 

http://codepen.io/anon/pen/GjzrdX?editors=0010

イベントハンドラは、私が編集していたときに発動textおよびnumberフィールド、およびwhenタグの値はnullですが、タグ配列（たとえばピンク、パープル、緑、青）のデータオブジェクトでは発生しません。データ構造を変更せずにタグセルのイベントを発生させるにはどうすればよいですか？どんなアドバイスも大歓迎です！

Answer 1

私はセルに配列を配置しようとしたときにあなたのバグに直面していると思いますが、この問題を言及しているhandsontableのドキュメントやGitHubのスレッドはどこにも見つかりません... IMO、データではなくソースとして使用して、編集できないセルになります（したがって、afterChange/beforeChangeイベントはトリガーされません）。あなたの例では、3番目の行は配列ではない 'null'値のために働いています。

とにかく、あなたがデータを変更するのはです（条件を尊重するためにのデータ構造を定義していますが、どうにかする必要があるため変更することを強くお勧めします）それは結局）。

var data1 = []; 
for (var i=0; i<data.length;i++) { 
    if (data[i].tags != null) { 
    var temp = data[i].tags[0]; 
    temp = temp.concat(','); 
    temp = temp.concat(data[i].tags[1]); 
    } else var temp = null; 
    data1.push({ id: data[i].id, name: data[i].name, price: data[i].price, tags: temp }); 
} 

あなたの配列の長さタグがそれ以上になることができれば、それをカバーするために第二のループを実行します。あなたのタグは2つのだけの値を含めることができると仮定すると

。

このソリューションを使用してコードhereを参照してくださいあなたは、あなたのテーブルをロードするためにDATA1を使用することができます

を実施しました。変更後にデータを保存する必要がある場合は、同様の機能を使用して元のデータ構造に戻すことができます。