Handsontableのカスケードドロップダウン

debugcn 投稿 Dev

アサフデビッド

条件が別のセルの内容によって決定されている間に、ドロップダウンタイプの列を作成しようとしています。

列の設定は関数によって作成されます。カスケードドロップダウンである必要がある場合、ソースも関数です。

すべてが正常に機能しており、セルをダブルクリックすると関数が呼び出されます。関数は実行中であり、正しい配列を返します。ただし、ドロップダウンは開きません。

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

アサフデビッド

私はこの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回目のクリックで開くか、セルを編集するとき（任意の文字を入力するか消去する）に開きます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]