Handsontable Bearbeitung geschachteltes Array

Question

Ich benutze handsontable und habe Probleme, die "beforeChange" und "afterChange" -Ereignisse konsequent zu feuern, die ich hoffe, verwenden Sie Updates für die Datenbank zu übernehmen. Ich verwende den folgenden Code (Version 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

Die Ereignishandler ausgelöst wird, wenn ich die Bearbeitung der Text- und Zahlenfelder und für die When-Tags sind null, aber feuern nicht für Datenobjekte mit Tag-Arrays (zB pink, purple; grün, blau). Wie kann ich die Ereignisse für die Tag-Zellen auslösen, ohne die Datenstruktur zu ändern? Jeder Rat würde sehr geschätzt werden!

Answer 1

Ich glaube, dass Sie hier einen Fehler haben, wenn Sie versuchen, ein Array in eine Zelle zu setzen, aber ich kann nirgends in der handsontable Dokumentation oder einem Thread in ihrem GitHub finden dieses Problem ... IMO, ein Array in eine Zelle sollte als Quelle und nicht als Daten verwendet werden, was zu einer Zelle führt, die Sie nicht bearbeiten können (daher werden die Ereignisse nachChange/beforeChange nicht ausgelöst). In Ihrem Beispiel funktioniert die dritte Zeile wegen des Nullwerts, der kein Array ist.

Wie auch immer, die einzige Problemumgehung, die ich für Sie getan habe, ist die Änderung Ihrer Daten nach Sie definieren Ihre Datenstruktur (um Ihren Zustand zu respektieren, aber ich rate dringend, sie sowieso zu ändern, weil Sie tun müssen dass irgendwann).

Unter der Annahme, dass Ihre Tags nur zwei Werte enthalten:

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 }); 
} 

Wenn die Länge Ihrer Arrays Tags mehr als das sein kann, nur eine zweite Schleife tut es abzudecken.

Ihr Code here mit dieser Lösung

Sie implementiert dann data1 Tisch laden kann. Wenn Sie Ihre Daten nach der Änderung speichern möchten, können Sie eine ähnliche Funktion verwenden, um sie in Ihre ursprüngliche Datenstruktur umzukehren.