HOT-in-HOT 动态 handsontable 在 handsontable getValue() 函数表达式问题

Question

我正在尝试使用 Handsontable 版本 0.34.4CE/1.14.2 PRO 在 Handsontable（HOT-in-HOT）中创建一个 Handsontable。使用此处提供的文档一切正常... Handsontable 但我想使用多个多维数组动态创建所有内容。

问题是，当您通常创建 Handsontable 时，您可以很好地分配所有变量，而当您动态分配时，它也能正常工作。当您在 Handsontable 中引入自定义函数时，动态创建它们并不像通常那样简单。

正如您在下面的代码中看到的，我意识到我需要将 getValue() 函数作为表达式传递，它才能工作。问题在于表达式是动态创建的，因此函数中的变量未在该函数的本地范围内最终确定，并且试图在函数运行s 时访问。我需要变量 save/set/assign 到函数中的变量，并尝试在创建表达式后调用。

文档中的正常 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是由多个多维数组定义的，本期仅给出相关代码。其他地方有更多代码用于配置 table 的其余部分。此特定部分以细胞类型的条件开始。如果单元格类型 id Handsontable 则为 HOT-in-HOT 创建单元格选项。请注意，这个动态创建构建了一个父 Handsontable，它有多个使用不同 HOT-in-HOT 的列。问题出在注释下方代码的表达式版本中。变量 'temp_field_value_to_use' 是 HOT-in-HOT 中列的索引，我想将其用作父 Handsontable 中的值。由于此 value/column 索引根据父 Handsontable 中具有 HOT-in-HOT 的列而变化，因此变量必须动态保存到表达式中。现在，当代码全部为运行时，变量 'temp_field_value_to_use' 始终给出最后分配的值，这意味着它没有与表达式一起动态保存，并且对每个 HOT-in 使用相同的 function/expression -热门。

Answer 1

我认为由于表达式是动态创建的，所以问题在于表达式是如何创建的以及它的范围是如何设置的。经过大量研究，我找到了解决方案。该解决方案使用所谓的 JavaScript 闭包，这是一个自调用函数。如果可以的话，请添加或做得更好，我希望这对一路走来的人有所帮助。我还要求 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;
}

HOT-in-HOT 动态 handsontable 在 handsontable getValue() 函数表达式问题

HOT-in-HOT dynamic handsontable in handsontable getValue() function expression issue

javascript

expression

dynamic

handsontable