[英]How to load data only on few columns in handsontable on change in the value of a dropdown in a cell?
I have a handsontable with few columns.Where one of the columns has dropdown values. 我有一个没有列的handontable。其中一列有下拉值。 On change of the dropdown value I want to load the next two columns based on dropdown selection. 在更改下拉列表值时,我想根据下拉列表选择加载下两列。 I will get a JSON array data for selected dropdown value. 我将获得所选下拉值的JSON数组数据。 How can I push the JSON array data for those two columns? 如何为这两列推送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();
});
Here is the JSfiddle link 这是JSfiddle链接
http://jsfiddle.net/6dzrpdzu/2/ http://jsfiddle.net/6dzrpdzu/2/
I think you are looking for attaching afterchange
event to your `handsontable to grab the dropdown selection event. 我认为您正在寻找将afterchange
事件附加到您的`handsontable以获取下拉选择事件。 Please have a look at updated fiddle: 请看看更新的小提琴:
http://jsfiddle.net/6dzrpdzu/5/ 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]);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.