Hot-in-HOT动态handsontable getValue（）函数表达式问题

我正在使用Handsontable版本0.34.4CE/1.14.2 PRO创建Handsontable（HOT-in-HOT）中的Handsontable。一切工作正常，可用的文档在这里... Handsontable但我想要使用多个多维数组动态创建它。Hot-in-HOT动态handsontable getValue（）函数表达式问题

问题是，当你创建一个Handsontable通常你可以分配所有的变量就好了，当你动态地执行它的时候，它也可以。当您在Handsontable中引入自定义函数时，动态创建它们并不像通常那样简单。

正如您在下面的代码中看到的，我意识到我需要将getValue（）函数作为表达式来传递。问题在于表达式是动态创建的，因此函数中的变量没有在本地函数的范围内最终确定，而是试图在函数运行时访问。我需要变量来保存/设置/赋值给函数中的变量，并在创建表达式后尝试调用。

普通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 
    } 
     } 
    ] 
    });

热在最热的设置我试图做动态...

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使用相同的函数/表达式。

来源

2017-09-27 CommonKnowledge

我认为，由于表达式是动态创建的，所以问题在于如何创建表达式以及如何设置其范围。经过一番研究，我找到了一个解决方案。该解决方案使用所谓的JavaScript Closure，这是一个自调用函数。如果可以，请添加或更好，我希望这可以帮助一路上的人。我还要求Handsontable添加他们的文档。

您可以在下面的代码中看到，外部函数被分配了动态变量，因此范围发生更改，因此内部函数使用otter变量而不是动态Handsontable选项配置循环范围内的变量。

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]; 

    var temp_field_value_to_use = data_arr[3][key][1][1]; 
    //// JavaScript Closure expression below. //// 
    var hot_in_hot_function = (function() 
    { 
     var field_use = temp_field_value_to_use; 
     return function() 
     { 
      var selection = this.getSelected(); 
      return this.getSourceDataAtRow(selection[0])[field_use]; 
     } 
    })(); 

    data_table_1_columns_arr[count]['handsontable']['getValue'] = hot_in_hot_function; 
}

来源

2017-09-27 13:56:57 CommonKnowledge

Hot-in-HOT动态handsontable getValue（）函数表达式问题

回答

相关问题