在 Handsontable 单元格中加载数组

Posted 2023-03-22

【中文标题】在 Handsontable 单元格中加载数组

【英文标题】：Load array in Handsontable cell

【发布时间】：2018-02-09 01:53:48

【问题描述】：

在更改一个cell 中的值时，我必须在另一个单元格中加载array of values（作为下拉菜单）。

我不知道如何在单元格中加载数组。

我尝试的是：

afterChange: function(changes, source) 
        if(!changes) 
        return;
      
      $.each(changes, function(index, element) 
       var row = element[0];
       var col = element[1];
       var oldVal = element[2];
       var newVal = element[3];
       if(col==6) 
         tsContainer.setDataAtCell(row, 1, pjtArray);    
       
      );
    

这里我使用setDataAtCell 方法，它将数组加载为字符串（逗号分隔）。

我试过了

     var arr = [['123'],['dfg'],['678'],['asd']];
     tsContainer.populateFromArray(row, 1, arr);

但它会加载每个单元格中的每个元素的数组。

我必须在一个单元格中显示所有元素作为下拉菜单。

在 handsontbale 列属性中，我们可以将数组设置为source。我需要这样的东西。

由于数据是动态加载的，我必须在afterChange 事件中写下这个。

请帮帮我..

【参考方案1】：

您的猜测是正确的，您需要更改列的属性源来修改下拉值。

让我们采用以下初始数据集：

myData = [
    ['source1', 'option1'],
    ['source1', 'option3'],
    ['source2', 'option5'],
    ['source2', 'option7']
],

以及以下下拉值：

selectSource = ['source1','source2'],
source1 = ['option1','option2','option3','option4'],
source2 = ['option5','option6','option7','option8'],

假设您要根据第 1 列的值修改第 2 列的下拉值。（如果第 1 列等于 'source1'，则第 2 列的下拉值将是数组 source1，如果它等于 ' source2'，第 2 列的源将是数组 source2) ：

使用 getCellMeta(row,column) 获取单元格的属性 访问源并为您的新阵列更改它

参数row是你触发afterChange事件的当前行，value是该行第1列的值：

function setDropDownSource(row, value) 
    var instance = this;
    var cellPropertiesOption = instance.getCellMeta(row,1); // Column 1 is your 2nd column
    if (value == 'source1')
        cellPropertiesOption.source = source1;
    else if (value == 'source2')
        cellPropertiesOption.source = source2;
    else
        cellPropertiesOption.source = null;

该函数在 afterChange 事件中调用如下：

$.each(changes, function (index, element) 
    var rowIndex = element[0];
    var columnIndex = element[1];
    var newValue = element[3];

    if (columnIndex == 0)  // Checking if the event has been triggered within the column SourceSelector
        setDropDownSource.call(instance, rowIndex, newValue);
        instance.render();
    
);

我还添加了一个 afterLoadData 事件，以便在加载页面时为第二列的每一行设置源。但是我还想在源更改时清空单元格的当前值。因此，您将找到一个附加参数，用于在更改源时设置单元格是否需要为空的条件：

if (!init)
    instance.setDataAtCell(row,1,"");

您可以在 this JSFiddle 中找到完整的工作示例。