製品版のみの機能
スプレッドシート - フィルター ダイアログ
スプレッドシートのフィルター機能の基本的なサンプルです。ワークシートにボタン操作のためのテーブルおよび領域をコードで定義します。[テーブル ダイアログの表示] をクリックすると、データからテーブルを生成し、'B1' の下の値に選択済みの Applicant に基づいてフィルター ダイアログを表示します。[領域ダイアログの表示] をクリックすると、データから領域を生成し、'B1' の下の値に選択済みの Applicant に基づいてフィルター ダイアログを表示します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.scroll.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.popover.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.notifier.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.shared.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.validator.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.combo.css"/>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.excel-bundled.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.spreadsheet-bundled.js"></script>
</head>
<body>
<div>
<input class="spreadsheet-sample-btn" id="showTableDialog" type="button" value="テーブルのフィルター ダイアログを表示" onclick="showTableDialog()">
<input class="spreadsheet-sample-btn" id="showRegionDialog" type="button" value="領域のフィルター ダイアログを表示" onclick="showRegionDialog()">
<div id="spreadsheet"></div>
</div>
<script>
var workbook;
var worksheet;
var table;
$(function () {
var editingEnabled = true;
//Initializing igSpreadsheet
$("#spreadsheet").igSpreadsheet({
height: "300",
width: "75%",
isFormulaBarVisible: true,
editModeEntering: function (e, args) {
return editingEnabled;
}
});
createTableWorkbook()
});
//display the workbook via igSpreadsheet
function loadWorkbook(workbook) {
$("#spreadsheet").igSpreadsheet("option", "workbook", workbook);
}
function createTableWorkbook() {
workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
var sheet = workbook.worksheets().add('Sheet1');
sheet.columns(0).setWidth(72, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(1).setWidth(160, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(2).setWidth(110, $.ig.excel.WorksheetColumnWidthUnit.pixel);
sheet.columns(3).setWidth(275, $.ig.excel.WorksheetColumnWidthUnit.pixel);
// Create a to-do list table with columns for tasks and their priorities.
sheet.getCell('A1').value('ID');
sheet.getCell('B1').value('Applicant');
sheet.getCell('C1').value('Status');
sheet.getCell('D1').value('Comment');
// Populate the table with data
sheet.getCell('A2').value(3224);
sheet.getCell('B2').value('Armin Barrywater');
sheet.getCell('C2').value('Approved');
sheet.getCell('D2').value('');
sheet.getCell('A3').value(3244);
sheet.getCell('B3').value('Georgi Angelchov');
sheet.getCell('C3').value('In Review');
sheet.getCell('D3').value('Underwriter is out until next week.');
sheet.getCell('A4').value(3257);
sheet.getCell('B4').value('Imelda Sanchez');
sheet.getCell('C4').value('In Review');
sheet.getCell('D4').value('');
sheet.getCell('A5').value(3226);
sheet.getCell('B5').value('Perry Kane');
sheet.getCell('C5').value('On Hold');
sheet.getCell('D5').value('Waiting on paperwork from customer.');
sheet.getCell('A6').value(3225);
sheet.getCell('B6').value('Shiela Donahue');
sheet.getCell('C6').value('New');
sheet.getCell('D6').value('');
sheet.getCell('A7').value(3235);
sheet.getCell('B7').value('Xavier Fannello');
sheet.getCell('C7').value('New');
sheet.getCell('D7').value('');
loadWorkbook(workbook);
workbook = $("#spreadsheet").igSpreadsheet("option", "workbook");
worksheet = workbook.worksheets('Sheet1');
}
function showTableDialog() {
worksheet = workbook.worksheets('Sheet1');
worksheet.filterSettings().clearRegion();
worksheet.tables().clear();
table = worksheet.tables().add('A1:D8', true);
var executed = $("#spreadsheet").igSpreadsheet("showFilterDialogForTable", table.columns(1));
}
function showRegionDialog() {
worksheet = workbook.worksheets('Sheet1');
worksheet.tables().remove(table);
worksheet.filterSettings().setRegion("A1:D8");
var executed = $("#spreadsheet").igSpreadsheet("showFilterDialogForWorksheet", 1);
}
</script>
</body>
</html>