handontableでHOT-in-HOTの動的ハンドハンド可能getValue（）関数式の問題

Question

Handsontableバージョン0.34.4CE/1.14.2 PROを使用してHandsontable（HOT-in-HOT）でHandsontableを作成しようとしています。すべてはここで利用可能なドキュメントで正常に動作します... Handsontableしかし、私は複数の多次元配列を使って動的にすべてを作成したいと思います。

通常、Handsontableを作成するときは、すべての変数をうまく割り当てることができます。また、動的に行うと、正常に機能します。 Handsontableにカスタム関数を導入すると、それらを動的に作成することは、通常と同じくらい簡単ではありません。

以下のコードでわかるように、getValue（）関数を関数として渡す必要があることが分かりました。問題は、式が動的に作成されるため、関数内の変数がその関数のスコープ内でローカルに確定されず、関数の実行時にアクセスしようとしていることです。関数の変数を保存/設定/代入する変数が必要であり、式が作成された後に呼び出されるようにしようとしています。

通常、私は動的にやろうとしていますHOT-で-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-で-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の上にある動的バージョンは、複数の多次元配列によって定義されています。このうち、この問題の関連コードのみが示されています。他の場所には、テーブルの残りの部分を設定するためのコードがたくさんあります。この特定のセクションは、セルタイプの条件で始まります。セルタイプIDがHandsontableの場合、HOT-in-HOTのセルオプションを作成します。この動的作成では、さまざまなHOT-in-HOTを使用する複数の列を持つ親Handsontableが構築されています。問題は、コメントの下のコードの表現バージョンです。変数 'temp_field_value_to_use'は、親Handsontableの値に使用したいHOT-in-HOTの列のインデックスです。この値/列インデックスはHOT-in-HOTを持つ親Handsontableのその列に基づいて変化するため、変数は式に動的に保存する必要があります。コードがすべて実行されると、変数 'temp_field_value_to_use'は常に最後に割り当てられた値を返します。つまり、式で動的に保存されず、すべてのHOT-in-HOTで同じ関数/式を使用しています。

Answer 1

私は、式が動的に作成されているので、式の作成方法とスコープの設定方法に問題があると考えました。研究の良いビットの後、私は解決策を見つけた。このソリューションでは、JavaScript呼び出しと呼ばれる自己呼び出し機能を使用します。可能であれば、追加するか、できるかぎり改善してください。途中で誰かを助けてくれることを願っています。私はまた、Handsontableにドキュメントを追加するよう頼んだ。

外部関数に動的変数が割り当てられているため、内部関数が動的Handsontableオプション設定ループのスコープ内で変数の代わりにotter変数を使用するようにスコープが変更されていることがわかります。

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