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（）函數表達式問題

回答

相關問題