製品版のみの機能
グリッド - 基本グリッドを Excel にエクスポート
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このコンポーネントは、最小限のコードで igGrid と使用できます。
サーバーとの送信なしで表示されるデータを Excel ファイルにエクスポートできます。このサンプルでは、簡易なグリッドを Excel へエクスポートする方法を紹介します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!--Required scripts-->
<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>
<!-- External files for exporting -->
<script src="/js/external/FileSaver.js"></script>
<script src="/js/external/Blob.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.excel-bundled.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/modules/infragistics.gridexcelexporter.js"></script>
<style>
.right {
float: right;
}
#exportButton {
float: left;
}
</style>
</head>
<body>
<table id="grid"></table><br />
<input type="button" id="exportButton" value="エクスポート" />
<script>
$(function () {
$(function () {
var data = [
{ 'ProductID': 1, 'Name': 'Omnis ut illum nisi.', 'ProductNumber': '2973311236' },
{ 'ProductID': 2, 'Name': 'Quis quibusdam qui.', 'ProductNumber': '5907101619' },
{ 'ProductID': 3, 'Name': 'Sint laudantium et.', 'ProductNumber': '3057803521' },
{ 'ProductID': 17, 'Name': 'Tempore eos.', 'ProductNumber': '3576608248' },
{ 'ProductID': 18, 'Name': 'Maiores aut ducimus.', 'ProductNumber': '7079645227' },
{ 'ProductID': 19, 'Name': 'Vel inventore.', 'ProductNumber': '191484500' },
{ 'ProductID': 20, 'Name': 'Ut molestiae.', 'ProductNumber': '2994899561' },
{ 'ProductID': 31, 'Name': 'Nihil magnam aut ut.', 'ProductNumber': '5652753011' },
{ 'ProductID': 32, 'Name': 'Repellendus dolorum.', 'ProductNumber': '8807902556' },
{ 'ProductID': 43, 'Name': 'Odit ut quo minus.', 'ProductNumber': '1083007847' }
];
$("#grid").igGrid({
autoGenerateColumns: false,
width: "100%",
height: "200px",
columns: [
{ key: "ProductID", headerText: "製品 ID", width: "100px", dataType: "number" },
{ key: "Name", headerText: "製品名", width: "150px", dataType: "string" },
{ key: "ProductNumber", headerText: "製品番号", width: "200px", dataType: "number" }
],
dataSource: data,
primaryKey: "ProductID"
});
$("#exportButton").on("click", function () {
$.ig.GridExcelExporter.exportGrid($("#grid"), {
fileName: "igGrid"
});
});
});
});
</script>
</body>
</html>