我有一个只有几列的Handsontable。其中一列有下拉值。在下拉值更改时，我想根据下拉选择加载接下来的两列。我将获得选定下拉值的JSON数组数据。如何推送这两列的JSON数组数据？
document.addEventListener("DOMContentLoaded", function() {
function getCarData() {
return [
["Nissan", 2012, "black"],
["Nissan", 2013, "blue"],
["Chrysler", 2014, "yellow"],
["Volvo", 2015, "white"]
];
}
var
container = document.getElementById('example1'),
hot;
hot = new Handsontable(container, {
data: getCarData(),
colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color',"Body Colour"],
columns: [
{},
{type: 'numeric'},
{
type: 'dropdown',
source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
},
{
type: 'text'
},
{
type: 'text'
}
]
});
function bindDumpButton() {
if (typeof Handsontable === "undefined") {
return;
}
Handsontable.Dom.addEvent(document.body, 'click', function (e) {
var element = e.target || e.srcElement;
if (element.nodeName == "BUTTON" && element.name == 'dump') {
var name = element.getAttribute('data-dump');
var instance = element.getAttribute('data-instance');
var hot = window[instance];
console.log('data of ' + name, hot.getData());
}
});
}
bindDumpButton();
});
这是JSfiddle链接
http://jsfiddle.net/6dzrpdzu/2/
我认为您正在寻找将After change事件附加到您的'handsontable以获取下拉选择事件。请查看更新的小提琴：
http://jsfiddle.net/6dzrpdzu/5/
hot = new Handsontable(container, {
data: getCarData(),
colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color',"Body Colour"],
columns: [
{},
{type: 'numeric'},
{
type: 'dropdown',
source: ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white']
},
{
type: 'text'
},
{
type: 'text'
}
],
afterChange: onChange
});
function onChange(changes, source) {
if (!changes) {
return;
}
var instance = this;
var row = -1;
var col = -1;
var newValue = "";
changes.forEach(function (change) {
row = change[0];
col = change[1];
newValue = change[3];
});
if(col == 2){
instance.setDataAtCell(row, col+1, getCarData()[row][2]);
instance.setDataAtCell(row, col+2, getCarData()[row][2]);
}
}
