Handsontable 中的级联下拉菜单答案

【问题标题】：Cascading Dropdown in HandsontableHandsontable 中的级联下拉菜单
【发布时间】：2015-07-27 07:14:27
【问题描述】：

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

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

一切正常，双击单元格时会调用该函数。该函数正在运行并返回正确的数组。但下拉菜单打不开。

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;
};

【问题讨论】：

你能在返回之前放一个控制台日志语句吗？当你说点击不打开下拉菜单时，dropdownOptions是空的还是未定义的？
也尝试访问这个新对象并检查source 字段的内容。同样，它是空的还是未定义的？
是的，我放了一个控制台日志来检查输入是否正确，是的。 “来源”字段是什么意思？
在上面的代码中甚至可以看到控制台日志
我的错，是的，然后检查源字段。我的意思是调用您的实例并检查 columns 对象，然后检查 source 选项是否设置正确。

标签： javascript handsontable cascadingdropdown

【解决方案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) 
        }            
    }

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

【讨论】：

【解决方案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;
            }
        });

【讨论】：