製品版のみの機能
グリッド - 進行状況インジケーターとグリッドを Excel へエクスポート
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、Infragistics Ignite UI for jQuery グリッドを 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/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/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/2024.1/latest/js/infragistics.core.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.lob.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.excel-bundled.js"></script>
<script type="text/javascript" src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/modules/infragistics.gridexcelexporter.js"></script>
<style>
.right {
float: right;
}
#exportButton {
float: left;
}
.exporting-indicator {
position: absolute;
background-color: rgba(181, 181, 181, 0.9);
top: 0;
left: 0;
z-index: 100000;
text-align: center;
vertical-align: middle;
}
.exporting-indicator:after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.exporting-text {
font-size: 46px;
font-weight: bold;
vertical-align: middle;
}
</style>
</head>
<body>
<table id="grid"></table><br />
<input type="button" id="exportButton" value="エクスポート" />
<script>
$(function () {
var data = [
{ 'ProductID': 1, 'Name': 'Omnis ut illum nisi.', 'ProductNumber': 2973311236, "InStock": true, "Quantity": 56 },
{ 'ProductID': 2, 'Name': 'Quis quibusdam qui.', 'ProductNumber': 5907101619, "InStock": false, "Quantity": 0 },
{ 'ProductID': 3, 'Name': 'Sint laudantium et.', 'ProductNumber': 3057803521, "InStock": true, "Quantity": 26 },
{ 'ProductID': 17, 'Name': 'Tempore eos.', 'ProductNumber': 3576608248, "InStock": true, "Quantity": 8 },
{ 'ProductID': 18, 'Name': 'Maiores aut ducimus.', 'ProductNumber': 7079645227, "InStock": true, "Quantity": 62 },
{ 'ProductID': 19, 'Name': 'Vel inventore.', 'ProductNumber': 191484500, "InStock": true, "Quantity": 18 },
{ 'ProductID': 20, 'Name': 'Ut molestiae.', 'ProductNumber': 2994899561, "InStock": false, "Quantity": 0 },
{ 'ProductID': 31, 'Name': 'Nihil magnam aut ut.', 'ProductNumber': 5652753011, "InStock": true, "Quantity": 41 },
{ 'ProductID': 32, 'Name': 'Repellendus dolorum.', 'ProductNumber': 8807902556, "InStock": true, "Quantity": 10 },
{ 'ProductID': 43, 'Name': 'Odit ut quo minus.', 'ProductNumber': 1083007847, "InStock": false, "Quantity": 0 },
{ 'ProductID': 1, 'Name': 'Omnis ut illum nisi.', 'ProductNumber': 2973311236, "InStock": true, "Quantity": 56 },
{ 'ProductID': 2, 'Name': 'Quis quibusdam qui.', 'ProductNumber': 5907101619, "InStock": false, "Quantity": 0 },
{ 'ProductID': 3, 'Name': 'Sint laudantium et.', 'ProductNumber': 3057803521, "InStock": true, "Quantity": 26 },
{ 'ProductID': 17, 'Name': 'Tempore eos.', 'ProductNumber': 3576608248, "InStock": true, "Quantity": 8 },
{ 'ProductID': 18, 'Name': 'Maiores aut ducimus.', 'ProductNumber': 7079645227, "InStock": true, "Quantity": 62 },
{ 'ProductID': 19, 'Name': 'Vel inventore.', 'ProductNumber': 191484500, "InStock": true, "Quantity": 18 },
{ 'ProductID': 20, 'Name': 'Ut molestiae.', 'ProductNumber': 2994899561, "InStock": false, "Quantity": 0 },
{ 'ProductID': 31, 'Name': 'Nihil magnam aut ut.', 'ProductNumber': 5652753011, "InStock": true, "Quantity": 41 },
{ 'ProductID': 32, 'Name': 'Repellendus dolorum.', 'ProductNumber': 8807902556, "InStock": true, "Quantity": 10 },
{ 'ProductID': 43, 'Name': 'Odit ut quo minus.', 'ProductNumber': 1083007847, "InStock": false, "Quantity": 0 }
];
$("#grid").igGrid({
autoGenerateColumns: false,
width: "100%",
height: "350px",
columns: [
{ headerText: "製品 ID", key: "ProductID", dataType: "number", width: "100px" },
{ headerText: "製品名", key: "Name", dataType: "string", width: "250px" },
{ headerText: "製品番号", key: "ProductNumber", dataType: "number", width: "200px" },
{ headerText: "在庫", key: "InStock", dataType: "bool", width: "150px" },
{ headerText: "数量", key: "Quantity", dataType: "number", width: "150px" }
],
dataSource: data
});
var exportingIndicator = $('<div>');
$('#exportButton').on('click', function () {
var gridExcelExporter = new $.ig.GridExcelExporter();
var $grid = $('#grid');
gridExcelExporter.exportGrid($grid, {
gridStyling: "applied",
}, {
exportStarting: function (e, args) {
showExportingIndicator(args.grid, exportingIndicator);
},
success: function () {
hideExportingIndicator(exportingIndicator);
},
});
});
});
function showExportingIndicator(grid, exportingIndicator) {
var $gridContainer = $('#' + grid.attr('id') + '_container');
exportingIndicator.css({
"width": $gridContainer.outerWidth(),
"height": $gridContainer.outerHeight()
}).html('<span class="exporting-text">エクスポートしています...</span>');
exportingIndicator.addClass("exporting-indicator");
$gridContainer.append(exportingIndicator);
}
function hideExportingIndicator(exportingIndicator) {
exportingIndicator.remove();
}
</script>
</body>
</html>