Handsontable 中的级联下拉列表

Question

我正在尝试创建一个下拉类型列，而条件由另一个单元格的内容决定。

列设置是由一个函数构建的，当它应该是一个级联下拉列表时，源也是一个函数。

一切正常，当您双击单元格时会调用该函数。函数是运行和return右数组。但是下拉菜单打不开。

JS 的简短版本：

data: Object.keys(data[0])[i],
type: "dropdown",
source: function getDropdownList() {
          // function build the array
          return dropdownOptions;
        }

长版JS：

var myData = Handsontable.helper.createSpreadsheetData(5, 5);
var container = document.getElementById('table1');
var settings1 = {
   data: myData,
   columns: buildTypeObject()
}

var table1 = new Handsontable(container, settings1);

function buildTypeObject() {
  var typeObject = [];
  for (var i = 0; i < myData.length; i++) {
    if (i=1) {
        typeObject[i] = {
            data: ("column " + i),
            type: "dropdown",
            source: function getDropdownList() {
                var dropdownOptions = [];
                var selectedRow = table1.getSelected()[0];
                var selectedColumn = table1.getSelected()[1];
                var previousCell = table1.getDataAtCell(selectedRow, selectedColumn-1);
                if (previousCell == "A1") {
                    dropdownOptions = ["AB1","BB1"];
                } else {
                    dropdownOptions = ["ZZ1", "ZZ2", "ZZ3", "ZZ4"];                        
                }
                console.log(dropdownOptions);
                return dropdownOptions;            
            }
        }                
    } else {
        typeObject[i] = {
            data: ("column " + i) 
        }            
    }
 };
 return typeObject;
};

Answer 1

我已经用 setCellMeta(row, col, key, value) 方法解决了这个问题。

所以现在 JS 看起来像这样：

var myData = Handsontable.helper.createSpreadsheetData(5, 5);
var container = document.getElementById('table1');
var settings1 = {
   data: myData,
   columns: buildTypeObject()
}

var table1 = new Handsontable(container, settings1);

function buildTypeObject() {
  var typeObject = [];
  for (var i = 0; i < myData.length; i++) {
    if (i=1) {
        typeObject[i] = {
            data: ("column " + i),
            type: "dropdown",
            source: function getDropdownList() {
                var dropdownOptions = [];
                var selectedRow = table1.getSelected()[0];
                var selectedColumn = table1.getSelected()[1];
                var previousCell = table1.getDataAtCell(selectedRow, selectedColumn-1);
                if (previousCell == "A1") {
                    dropdownOptions = ["AB1","BB1"];
                } else {
                    dropdownOptions = ["ZZ1", "ZZ2", "ZZ3", "ZZ4"];                        
                }
                console.log(dropdownOptions);
                //return dropdownOptions;
                setCellMeta(selectedRow, selectedCol, "source", dropdownOptions);            
            }
        }                
    } else {
        typeObject[i] = {
            data: ("column " + i) 
        }            
    }

唯一的问题是下拉列表在第一次点击时不打开，但在第二次点击时或在我编辑单元格（输入任何字符或擦除）时打开

Answer 2

我希望下面的代码能根据我的发现对某些人有所帮助。

select2-editor 公开回调 onBeginEditing

$("#hot").handsontable({           
        onBeginEditing: function () {
            var activeEditor = instance.getActiveEditor();
            var selectedRow = activeEditor.cellProperties.row
            var selectedColumn = activeEditor.cellProperties.col;
            if ( selectedColumn == 3) {
                var tester = instance.getDataAtCell(selectedRow, 14);
                var filterlist = [];
                var optionsList = activeEditor.options.data;
                for (var index = 0; index < optionsList.length; index++) {
                    if (tester == optionsList[index].tester) {
                        filterlist.push(optionsList[index]);
                    }
                }
                activeEditor.options.data = filterlist;
            }
        });

Handsontable 中的级联下拉列表

Cascading Dropdown in Handsontable

javascript

cascadingdropdown

handsontable