handsontable에서 hot-in-hot 동적 handhandable 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 설정 I 동적으로 어떻게하려고 ...

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 HOT에서 셀 옵션을 작성하는 경우. 이 동적 생성은 다양한 HOT-in-HOT를 사용하는 여러 열이있는 부모 Handsontable을 만듭니다. 문제는 주석 아래 코드의 표현식 버전에 있습니다. 변수 'temp_field_value_to_use'는 부모 Handsontable의 값에 사용하려는 HOT-in-HOT의 열 인덱스입니다. 이 값/열 인덱스는 핫 - 인 - HOT가있는 부모 Handsontable의 해당 열을 기반으로 변경되므로 변수는 식에 동적으로 저장해야합니다. 이제 코드가 모두 실행될 때 'temp_field_value_to_use'변수는 항상 마지막으로 할당 된 값을 제공합니다. 즉, 식과 함께 동적으로 저장되지 않았으며 모든 HOT-in-HOT에 대해 동일한 함수/표현식을 사용하고 있음을 의미합니다.

Answer 1

표현식이 동적으로 작성 되었기 때문에 표현식 작성 방법과 범위 설정 방법에 문제가 있다고 생각했습니다. 좋은 연구 끝에 나는 해결책을 찾았습니다. 이 솔루션은 자체 호출 함수 인 JavaScript Closure를 사용합니다. 할 수 있으면 더해 지거나 더 좋게 만들어주세요. 그 길을 따라 누군가가 도움이되기를 바랍니다. 나는 또한 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; 
}