Удобное редактирование вложенного массива

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

обработчики событий срабатывать, когда я редактированием текстовых и числовых полей и для тегов, когда теги являются нулевыми, но не загораются для объектов данных с массивами тегов (например, розовый, фиолетовый, зеленый, синий). Как я могу активировать события для ячеек тегов без изменения структуры данных? Любой совет будет очень благодарен!

Answer 1

Я считаю, что вы столкнулись с ошибкой при попытке поместить Array в ячейку, но я не могу найти нигде в рукописной документации или любой теме в их GitHub, которая упоминает об этой проблеме ... IMO, помещая массив в ячейку предполагается использовать как источник, а не данные, что приводит к созданию ячейки, которую вы не можете редактировать (следовательно, события afterChange/beforeChange не запускаются). В вашем примере третья строка работает из-за значения «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 }); 
} 

Если длина ваших Массивы теги может быть больше, чем просто сделать вторую петлю, чтобы покрыть его.

Смотрите код here с этим решением реализован

Затем вы можете использовать data1, чтобы загрузить таблицу. Если вам нужно сохранить свои данные после изменения, вы можете использовать аналогичную функцию, чтобы перевернуть ее в исходную структуру данных.