我正在尝试使用Handsontable版本0.34.4CE / 1.14.2 PRO在Handsontable(HOT-in-HOT)中创建一个Handsontable . 一切正常,使用此处提供的文档... Handsontable但我想使用多个多维数组动态创建所有文档 .
问题在于,当您通常创建一个Handsontable时,您可以很好地分配所有变量,当您动态地执行它时,它也可以正常工作 . 当您在Handsontable中引入自定义函数时,动态创建它们并不像通常那样简单 .
正如您在下面的代码中看到的,我意识到我需要将getValue()函数作为表达式传递它才能工作 . 问题是表达式是动态创建的,因此函数中的变量不会在本地函数的范围内最终确定,并且在函数运行时尝试访问 . 我需要变量来保存/设置/赋值给函数中的变量,并尝试在创建表达式后调用 .
来自文档的正常HOT-in-HOT ......
var
carData = getCarData(),
container = document.getElementById('example1'),
manufacturerData,
colors,
color,
colorData = [],
hot;
manufacturerData = [
{name: 'BMW', country: 'Germany', owner: 'Bayerische Motoren Werke AG'},
{name: 'Chrysler', country: 'USA', owner: 'Chrysler Group LLC'},
{name: 'Nissan', country: 'Japan', owner: 'Nissan Motor Company Ltd'},
{name: 'Suzuki', country: 'Japan', owner: 'Suzuki Motor Corporation'},
{name: 'Toyota', country: 'Japan', owner: 'Toyota Motor Corporation'},
{name: 'Volvo', country: 'Sweden', owner: 'Zhejiang Geely Holding Group'}
];
colors = ['yellow', 'red', 'orange', 'green', 'blue', 'gray', 'black', 'white'];
while (color = colors.shift()) {
colorData.push([
[color]
]);
}
hot = new Handsontable(container, {
data: carData,
colHeaders: ['Car', 'Year', 'Chassis color', 'Bumper color'],
columns: [
{
type: 'handsontable',
handsontable: {
colHeaders: ['Marque', 'Country', 'Parent company'],
autoColumnSize: true,
data: manufacturerData,
getValue: function() {
var selection = this.getSelected();
// Get always manufacture name of clicked row
return this.getSourceDataAtRow(selection[0]).name;
},
}
},
{type: 'numeric'},
{
type: 'handsontable',
handsontable: {
colHeaders: false,
data: colorData
}
},
{
type: 'handsontable',
handsontable: {
colHeaders: false,
data: colorData
}
}
]
});
HOT-in-HOT设置我试图动态...
if(data_arr[0][key][2]['cell_type'] == "handsontable" && data_table_1_col_headers_options_arr[key][0] != "NA")
{
data_table_1_columns_arr[count]['handsontable'] = new Array();
data_table_1_columns_arr[count]['handsontable']['colHeaders'] = data_arr[3][key][1][0];
data_table_1_columns_arr[count]['handsontable']['autoColumnSize'] = true;
data_table_1_columns_arr[count]['handsontable']['data'] = data_arr[3][key][0];
//// THE ISSUE IS IN THE EXPRESSION BELOW. ////
var temp_field_value_to_use = data_arr[3][key][1][1];
var hot_in_hot_function = function ()
{
var selection = this.getSelected();
var field_use = temp_field_value_to_use;
return this.getSourceDataAtRow(selection[0])[field_use];
};
data_table_1_columns_arr[count]['handsontable']['getValue'] = hot_in_hot_function;
}
正如您在上面的动态版本中所看到的,Handsontable由多个多维数组定义,其中仅针对此问题显示相关代码 . 其他地方有很多代码用于配置表的其余部分 . 该特定部分以细胞类型的条件开始 . 如果单元格类型为“Handsontable”,则为HOT-in-HOT创建单元格选项 . 请注意,此动态创建会构建一个父Handsontable,其中包含多个使用不同HOT-in-HOT的列 . 问题出在评论下面的代码表达式版本中 . 变量'temp_field_value_to_use'是HOT-in-HOT中我想用于父Handsontable中的值的列的索引 . 由于此值/列索引根据具有HOT-in-HOT的父Handsontable中的该列而更改,因此该变量必须动态保存到表达式 . 现在,当代码全部运行时,变量'temp_field_value_to_use'总是给出最后指定的值,这意味着它没有与表达式一起动态保存,并且对于每个HOT-in-HOT使用相同的函数/表达式 .
1 回答
我认为,由于表达式是动态创建的,因此问题在于如何创建表达式以及如何设置其范围 . 经过一番研究,我找到了解决方案 . 该解决方案使用所谓的JavaScript Closure,它是一个自我调用函数 . 如果可以的话,请添加,或者做得更好,我希望这可以帮助一路上的人 . 我还要求Handsontable添加他们的文档 .
您可以在下面的代码中看到外部函数被赋予动态变量,因此范围发生变化,因此内部函数使用otter变量而不是动态Handsontable选项配置循环范围内的变量 .