在Handsontable单元格中加载数组

时间:2017-08-31 07:37:54

标签: javascript jquery arrays handsontable

在更改一个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 个答案:

答案 0 :(得分:0)

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

我们采用以下初始数据集:

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):

  1. 使用getCellMeta(行,列)获取单元格的属性
  2. 访问源并为新阵列更改
  3. 参数是您触发事件后更改的当前行,是此行的第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中找到完整的工作示例。