igSpreadsheetのセルにドロップダウンリストを追加してその中から値を選択するようなUIを作りたい場合は、Excelライブラリーを使用します。

igSpreadsheetに紐づいているworkbookからworksheetオブジェクトを取り出します。ListDataValidationRuleオブジェクトを生成し、setValues()でドロップダウンリストに表示したい項目を設定します。そして、ListDataValidationRuleをdataValidationRule()メソッドを使って該当セルに設定します。

// ①igSpreadsheetに紐づいているworkbookからworksheetオブジェクトを取り出します。
var workbook = $("#spreadsheet").igSpreadsheet("option", "workbook");
var worksheet = workbook.worksheets(0);

// ②ListDataValidationRuleオブジェクトを生成し、setValues()でドロップダウンリストに表示したい項目を設定します。
const valueRule = new $.ig.excel.ListDataValidationRule();
valueRule.setValues(["りんご", "みかん", "いちご", "その他"]);

// ③ListDataValidationRuleをdataValidationRule()メソッドを使って該当セルに設定します。
var cell = worksheet.getCell("B2");
cell.dataValidationRule(valueRule);

 

実行結果

 

サンプル

 

APIリファレンス

 

Tagged:

製品について

Ignite UI for jQuery