製品版のみの機能

スプレッドシート - ビューの生成とデータの保存

このサンプルは、Infragistics Ignite UI for jQuery JavaScript Excel ライブラリを使用してワークシートを生成し、igSpreadsheet コントロールで表示、編集、変更をファイルに保存する方法を紹介します。
Excel の編集を有効にする
Wj
Sheet1
Sheet1

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。

このサンプルは、カスタム データおよび書式設定を持つ Excel の表をブラウザーで生成する方法を紹介します。ワークブックを作成した後、可視化のために igSpreadsheet コントロールにオプションとして渡されます。読み込んだ後、公開された save メソッドによってローカルに保存できます。

コード ビュー

クリップボードへコピー 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Generate and Save Data</title>

	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
	<link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

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

	<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.excel-bundled.js"></script>
	<script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.spreadsheet-bundled.js"></script>

	<!-- saving worksheet -->
	<script src="https://www.igniteui.com/js/external/FileSaver.js"></script>

    <style>
        .ui-igspreadsheet .ui-menu-item {
            white-space:nowrap;
        }
        .spreadsheet-sample-btn
        {
            max-width: 200px;
            padding: 8px;
            background: #fff;
            color:#444;
            text-align: center;
            border-radius: 3px;
            font-size: 12px;
            text-transform: uppercase;
            margin:0 15px 15px 0;
            cursor:pointer;
            border:1px solid #ccc;
        }

        .spreadsheet-sample-btn:hover {
            border-color:#09f;
        }

		.editing-controls-container {
			display: inline-block;
			position: relative;
			min-width: 200px;
			margin: 18px 15px;
		}

			.editing-controls-container #enableEditing {
				margin-right: 6px;
				border-radius: 3px;
				position: absolute;
				left: 0;
				top: 10px;
			}

		.label-editing {
			display:inline-block;
			position: absolute;
			left: 23px;
			top: 15px;
		}
    </style>

</head>
<body>

	<div>
		<input class="spreadsheet-sample-btn" id="createWorkbookBtn" type="button" value="ワークブックを生成" onclick="createWorkbook()">
		<input class="spreadsheet-sample-btn" id="saveWorkbookBtn" type="button" value="ワークブックを保存" onclick="saveWorkbook()">
		<div class="editing-controls-container">
			<span for="enableEditing" class="show-row-text">
				<div id="enableEditing"></div>
				<span class="label-editing">Excel の編集を有効にする</span>
			</span>
		</div>
				
		<div id="spreadsheet"></div>
	</div>
	<script>
		$(function () {
			var editingEnabled = true;
			//Initializing igSpreadsheet
			$("#spreadsheet").igSpreadsheet({
				height: "600",
				width: "100%",
				isFormulaBarVisible: true,
				editModeEntering: function (e, args) {
					return editingEnabled;
				}
			});

			$("#enableEditing").igCheckboxEditor({
				checked: true,
				valueChanged: function (evt, ui) {
					editingEnabled = ui.newState;
				}
			});
		});

		//display the workbook via igSpreadsheet
		function loadWorkbook(workbook) {
			$("#spreadsheet").igSpreadsheet("option", "workbook", workbook);
		}

		//using the save method, which is exposed by the Excel library
		function saveWorkbook(workbook, name) {
			$("#spreadsheet").igSpreadsheet("option", "workbook")
				.save({ type: 'blob' }, function (data) {
					saveAs(data, name);
				}, function (error) {
					alert('Error exporting: : ' + error);
				});
		}

		function createWorkbook() {
			var workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
			var sheet = workbook.worksheets().add('Sheet1');
			sheet.columns(0).setWidth(96, $.ig.excel.WorksheetColumnWidthUnit.pixel);
			sheet.columns(4).setWidth(80, $.ig.excel.WorksheetColumnWidthUnit.pixel);
			sheet.columns(6).setWidth(136, $.ig.excel.WorksheetColumnWidthUnit.pixel);

			// Add merged regions for regions A1:D2 and E1:G2
			var mergedCellA1D2 = sheet.mergedCellsRegions().add(0, 0, 1, 3);
			var mergedCellE1G2 = sheet.mergedCellsRegions().add(0, 4, 1, 6);

			// Add two large headers in merged cells above the data
			mergedCellA1D2.value('Acme, Inc.');
			mergedCellA1D2.cellFormat().alignment($.ig.excel.HorizontalCellAlignment.center);
			mergedCellA1D2.cellFormat().fill($.ig.excel.CellFill.createSolidFill('#ED7D31'));
			mergedCellA1D2.cellFormat().font().colorInfo(new $.ig.excel.WorkbookColorInfo($.ig.excel.WorkbookThemeColorType.light1));
			mergedCellA1D2.cellFormat().font().height(16 * 20);

			mergedCellE1G2.value('Invoice #32039');
			mergedCellE1G2.cellFormat().alignment($.ig.excel.HorizontalCellAlignment.center);
			mergedCellE1G2.cellFormat().fill($.ig.excel.CellFill.createSolidFill('#FFC000'));
			mergedCellE1G2.cellFormat().font().colorInfo(new $.ig.excel.WorkbookColorInfo($.ig.excel.WorkbookThemeColorType.light1));
			mergedCellE1G2.cellFormat().font().height(16 * 20);

			// Format some rows and columns that should have similar formatting so we don't have to set it on individual cells.
			sheet.rows(2).cellFormat().font().bold(true);
			sheet.columns(4).cellFormat().formatString('$#,##0.00_);[Red]($#,##0.00)');
			sheet.columns(6).cellFormat().formatString('$#,##0.00_);[Red]($#,##0.00)');

			// Add a light color fill to all cells in the A3:G17 region to visually separate it from the rest of the sheet. We can iterate
			// all cells in the regions by getting an enumerator for the region and enumerating each item.
			var light1Fill = $.ig.excel.CellFill.createSolidFill(new $.ig.excel.WorkbookColorInfo($.ig.excel.WorkbookThemeColorType.light1));
			var cells = sheet.getRegion('A3:G17').getEnumerator();
			while (cells.moveNext()) {
				cells.current().cellFormat().fill(light1Fill);
			}

			// Populate the sheet with data
			sheet.getCell('A3').value('Date');
			sheet.getCell('B3').value('Description');
			sheet.getCell('D3').value('Qty');
			sheet.getCell('E3').value('Cost/Unit');
			sheet.getCell('G3').value('Total');

			sheet.getCell('A4').value(new Date('12/22/2014'));
			sheet.getCell('B4').value('Garage Door');
			sheet.getCell('D4').value(1);
			sheet.getCell('E4').value(1875);
			sheet.getCell('G4').applyFormula('=D4*E4');

			sheet.getCell('A5').value(new Date('12/22/2014'));
			sheet.getCell('B5').value('Trim');
			sheet.getCell('D5').value(3);
			sheet.getCell('E5').value(27.95);
			sheet.getCell('G5').applyFormula('=D5*E5');

			sheet.getCell('A6').value(new Date('12/22/2014'));
			sheet.getCell('B6').value('Install/Labor');
			sheet.getCell('D6').value(8);
			sheet.getCell('E6').value(85);
			sheet.getCell('G6').applyFormula('=D6*E6');

			// Add a grand total which is bold and larger than the rest of the text to call attention to it.
			sheet.getCell('E17').value('GRAND TOTAL');
			sheet.getCell('E17').cellFormat().font().bold(true);

			sheet.getCell('G17').applyFormula('=SUM(G4:G16)');
			sheet.getCell('G17').cellFormat().font().bold(true);

			// Load the workbook in igSpreadsheet
			loadWorkbook(workbook);
			//Set summary cell as active cell
			$("#spreadsheet").igSpreadsheet("option", "activeCell", "G17");
		}
	</script>
</body>
</html>