ig.GridExcelExporter

ig.GridExcelExporter_image
igGridExcelExporter は、igGrid、igTreeGrid、および igHierarchicalGrid コントロールを Excel にエクスポートします。設定および機能は開発者によって指定されます。 igGridExcelExporter は igGrid のフィルター、非表示、ページング、並べ替え、集計、列固定、および仮想化機能をサポートします。 エクスポート処理で作成されるワークブックと操作するクライアント側 API を公開します。 igGridExcelExporter は Infragistics テーマをサポートします。

コード サンプル

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>GridExcelExporter</title>
     
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
     
    <!-- jQuery Core and jQuery UI -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
 
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
    <script src="js/infragistics.lob.js" type="text/javascript"></script>
     
    <!-- Required for igGridExcelExporter -->
      <script type="text/javascript" src="/js/modules/infragistics.documents.core.js"></script>
      <script type="text/javascript" src="/js/modules/infragistics.excel.js"></script>
      <script type="text/javascript" src="/js/modules/infragistics.gridexcelexporter.js"></script>
     
    <!-- External files for exporting -->
    <script src="http://www.igniteui.com/js/external/FileSaver.js"></script>
    <script src="http://www.igniteui.com/js/external/Blob.js"></script>
 
  </head>
  <body>
    <table id="grid"></table>
    <script type="text/javascript">
      $(function () {
        $("#grid").igGrid({
          columns: [
            { key: "ProductID", headerText: "Product ID" },
            { key: "Name", headerText: "Name" },
            { key: "ProductNumber", headerText: "Product number" },
            { key: "SafetyStockLevel", headerText: "Safety stock level" }
          ],
          autoGenerateColumns: false,
          primaryKey: "ProductID",
          dataSource: [
            { "ProductID": 1, "Name": "Adjustable Race", "ProductNumber": "AR-5381", "SafetyStockLevel": 1000 },
            { "ProductID": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "SafetyStockLevel": 1000 },
            { "ProductID": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "SafetyStockLevel": 800 },
            { "ProductID": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908", "SafetyStockLevel": 800 },
            { "ProductID": 316, "Name": "Blade", "ProductNumber": "BL-2036", "SafetyStockLevel": 800 },
            { "ProductID": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965", "SafetyStockLevel": 500 },
            { "ProductID": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738", "SafetyStockLevel": 500 },
            { "ProductID": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457", "SafetyStockLevel": 500 },
            { "ProductID": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903", "SafetyStockLevel": 1000 },
            { "ProductID": 321, "Name": "Chainring Nut", "ProductNumber": "CN-6137", "SafetyStockLevel": 1000 }
          ],
          width: "500px",
        });
 
        $.ig.GridExcelExporter.exportGrid($("#grid") {
          fileName: "igGrid"
        });
      })
    </script>
  </body>
</html>

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
filesaver.js
intl.js
infragistics.ui.grid.framework.js
infragistics.excel_core.js
infragistics.excel_serialization_openxml.js

Copyright © 1996 - 2025 Infragistics, Inc. All rights reserved.