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
infragistics.ui.grid.framework.js
infragistics.ui.grid.columnfixing.js
infragistics.ui.grid.filtering.js
infragistics.ui.grid.hiding.js
infragistics.ui.grid.paging.js
infragistics.ui.grid.sorting.js
infragistics.ui.grid.summaries.js
infragistics.excel.js
  • callbacks

    タイプ:
    object
    デフォルト:
    {}

    エクスポーター イベントのコールバック。

    • cellExported

      タイプ:
      object
      デフォルト:
      null

      セル エクスポートが終了したときに発生されるコールバック。
      関数は引数 sender および args 取得します。
      args.columnKey を使用してセルの igGrid 列キーを取得します。
      args.columnIndex を使用してセルの igGrid 列インデックスを取得します。
      args.cellValue を使用して igGrid セル値を取得します。
      args.rowId を使用して、行のキーまたはインデックスを取得します。
      args.xlRow を使用して、セルの Excel 表現への参照を取得します。
      args.grid を使用して、igGrid ウィジェットへの参照を取得します。

      コード サンプル

        
                  //Initialize
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {}, {
                    cellExported: function(sender, args) {
                      //returns the column key of the grid cell
                      args.columnKey
                      //returns the column index of the grid cell
                      args.columnIndex
                      //returns the value of the grid cell
                      args.cellValue
                      //returns the row's key or index
                      args.rowId
                      //returns reference to the current xlRow
                      args.xlRow 
                    }
                  });
                
    • cellExporting

      タイプ:
      object
      デフォルト:
      null

      Cancel="true" セル エクスポートが開始したときに発生されるコールバック。
      関数は引数 sender および args を取得します。
      args.columnKey を使用してセルの igGrid 列キーを取得します。
      args.columnIndex を使用してセルの igGrid 列インデックスを取得します。
      args.cellValue を使用して igGrid セル値を取得します。
      args.rowId を使用して、行のキーまたはインデックスを取得します。
      args.xlRow を使用して、セルの Excel 表現への参照を取得します。
      args.grid を使用して、igGrid ウィジェットへの参照を取得します。

      コード サンプル

                  //Initialize
                    $.ig.GridExcelExporter.exportGrid($(".selector"), {}, {
                      cellExporting: function(sender, args) {
                        //returns the column key of the grid cell
                        args.columnKey
                        //returns the column index of the grid cell
                        args.columnIndex
                        //returns the value of the grid cell
                        args.cellValue
                        //returns the row's key or index
                        args.rowId
                        //returns reference to the current xlRow
                        args.xlRow 
                      }
                    });
                
    • error

      タイプ:
      object
      デフォルト:
      null

      エクスポートが失敗したときに発生されるコールバック。
      error を使用して、エラー オブジェクトへの参照を取得します。

      コード サンプル

       
                  //Initialize
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {}, {
                    error: function(error) {
                      //returns reference to the error object
                      error;
                    }
                  });
                
    • exportEnding

      タイプ:
      object
      デフォルト:
      null

      Cancel="true" エクスポートが終了して、ドキュメントが保存されていないときに発生されるコールバック。
      関数は引数 sender および args を取得します。
      args.grid を使用して、igGrid ウィジェットへの参照を取得します。
      args.workbook を使用して、Excel ワークブックへの参照を取得します。
      args.worksheet を使用して、Excel ワークシートへの参照を取得します。

      コード サンプル

       
                  //Initialize
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {}, {
                    exportEnding: function(sender, args) {
                      //returns reference to the grid widget
                      args.grid
                      //returns reference to the excel workbook.
                      args.workbook
                      //returns reference to the excel worksheet.
                      args.worksheet
                      //returns the igGridExcelExporter settings object
                      sender.settings
                    }
                  });
                
    • exportStarting

      タイプ:
      object
      デフォルト:
      null

      Cancel="true" エクスポートが開始したときに発生されるコールバック。
      関数は引数 sender および args を取得します。
      args.grid を使用して、igGrid ウィジェットへの参照を取得します。

      コード サンプル

                  //Initialize
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {}, {
                    exportStarting: function(sender, args) {
                      //returns reference to the grid widget
                      args.grid
                      //returns the igGridExcelExporter settings object
                      sender.settings
                    }
                  });
                
    • headerCellExported

      タイプ:
      object
      デフォルト:
      null

      ヘッダー セル エクスポートが終了したときに発生されるコールバック。
      関数は引数 sender および args を取得します。
      args.headerText を使用してヘッダー セルのテキストを取得します。
      args.columnKey を使用してヘッダー セルの igGrid 列キーを取得します。
      args.columnIndex を使用してヘッダー セルの igGrid 列インデックスを取得します。

      コード サンプル

                  //Initialize
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {}, {
                    headerCellExported: function(sender, args) {
                      //returns the header text of the igGrid column
                      args.headerText
                      //returns the column key of the grid cell
                      args.columnKey
                      //returns the column index of the igGrid cell
                      args.columnIndex
                    }
                  });
                
    • headerCellExporting

      タイプ:
      object
      デフォルト:
      null

      Cancel="true" ヘッダー セル エクスポートが開始したときに発生されるコールバック。
      関数は引数 sender および args を取得します。
      args.headerText を使用してヘッダー セルのテキストを取得します。
      args.columnKey を使用してヘッダー セルの igGrid 列キーを取得します。
      args.columnIndex を使用してヘッダー セルの igGrid 列インデックスを取得します。

      コード サンプル

                  //Initialize
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {}, {
                    headerCellExporting: function(sender, args) {
                      //returns the header text of the igGrid column
                      args.headerText
                      //returns the column key of the grid cell
                      args.columnKey
                      //returns the column index of the igGrid cell
                      args.columnIndex
                    }
                  });
                
    • rowExported

      タイプ:
      object
      デフォルト:
      null

      Cancel="true" 行エクスポートが終了したときに発生されるコールバック。
      関数は引数 sender および args を取得します。
      args.rowId を使用して、行のキーまたはインデックスを取得します。
      args.element を使用して、行の TR 要素を取得します。
      args.xlRow を使用して、Excel 行への参照を取得します。
      args.grid を使用して、igGrid ウィジェットへの参照を取得します。
      注: igHierarchicalGrid をエクスポートする場合、このコールバックはルート グリッドの行でのみで利用可能です。

      コード サンプル

                  //Initialize
                 $.ig.GridExcelExporter.exportGrid($(".selector"), {}, {
                    rowExported: function(sender, args) {
                      //returns igGrid row key or id.
                      args.rowId;
                      //returns the row <tr> element.
                      args.element; 
                      //returns reference to the worksheet row.
                      args.xlRow;
                      //Use args.grid to get reference to the grid widget.
                      args.grid;
                    }
                  });
                
    • rowExporting

      タイプ:
      object
      デフォルト:
      null

      Cancel="true" 行エクスポートが開始したときに発生されるコールバック。
      関数は引数 sender および args を取得します。
      args.rowId を使用して、行のキーまたはインデックスを取得します。
      args.element を使用して、行の TR 要素を取得します。
      args.xlRow を使用して、Excel 行への参照を取得します。
      args.grid を使用して、igGrid ウィジェットへの参照を取得します。
      注: igHierarchicalGrid をエクスポートする場合、このコールバックはルート グリッドの行でのみで利用可能です。

      コード サンプル

                  //Initialize
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {}, {
                    rowExporting: function(sender, args) {
                      //returns igGrid row key or id.
                      args.rowId;
                      //returns the row <tr> element.
                      args.element; 
                      //returns reference to the worksheet row.
                      args.xlRow;
                      // returns reference to the grid widget.
                      args.grid;
                    }
                  });
                
    • success

      タイプ:
      object
      デフォルト:
      null

      エクスポートが成功したときに発生されるコールバック。
      data を使用して、保存されたオブジェクトへの参照を取得します。

      コード サンプル

                  //Initialize
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {}, {
                    success: function(sender, data) {
                      //returns a reference to the igGridExporter class
                      sender
                      //returns exported data
                      data
                    }
                  });
                
    • summaryExported

      タイプ:
      object
      デフォルト:
      null

      セル エクスポートが終了したときに発生されるコールバック。
      関数は引数 sender および args を取得します。
      args.headerText を使用して igGrid の列ヘッダーのテキストを取得します。
      args.columnKey を使用して igGrid の列キーを取得します。
      args.columnIndex を使用して igGrid 列インデックスを取得します。
      args.summary を使用して、集計オブジェクトへの参照を取得します。
      args.xlRowIndex を使用して、ワークシート行インデックスを取得します。

      コード サンプル

       
                  //Initialize
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {}, {
                    summaryExported: function(sender, args) {
                      //returns reference to the igGrid column header text.
                      args.headerText;
                      //returns reference to the igGrid column key.
                      args.columnKey;
                      //returns the the igGrid column index.
                      args.columnIndex;
                      //returns a reference to the summary object.
                      args.summary;
                      //returns a reference to the summary row index.
                      args.summaryRowIndex;
                      //returns the excel row index.
                      args.xlRowIndex;
                    }
                  });
                
    • summaryExporting

      タイプ:
      object
      デフォルト:
      null

      Cancel="true" 集計エクスポートが開始したときに発生されるコールバック。
      関数は引数 sender および args を取得します。
      args.headerText を使用して igGrid の列ヘッダーのテキストを取得します。
      args.columnKey を使用して igGrid の列キーを取得します。
      args.columnIndex を使用して igGrid 列インデックスを取得します。
      args.summary を使用して、集計オブジェクトへの参照を取得します。
      args.xlRowIndex を使用して、ワークシート行インデックスへの参照を取得します。

      コード サンプル

       
                  //Initialize
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {}, {
                    summaryExporting: function(sender, args) {
                      //returns reference to the igGrid column header text.
                      args.headerText;
                      //returns reference to the igGrid column key.
                      args.columnKey;
                      //returns the the igGrid column index.
                      args.columnIndex;
                      //returns a reference to the summary object.
                      args.summary;
                      //returns a reference to the summary row index.
                      args.summaryRowIndex;
                      //returns the excel row index.
                      args.xlRowIndex;
                    }
                  });
                
  • settings

    タイプ:
    object
    デフォルト:
    {}

    Infragistics グリッド Excel エクスポーター クライアント側コンポーネントはクラスとして実装されます。列固定、フィルター、非表示、ページング、並べ替え、および集計の機能と igGrid コントロールをエクスポートします。

    • columnsToSkip

      タイプ:
      array
      デフォルト:
      []
      要素タイプ:
      object

      エクスポートされない列のキーを含む文字列のリスト。

      コード サンプル

                  //Set
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {
                    // The keys of the columns that will not be exported
                    columnsToSkip: ["column1", "column2", "column3"]
                  });
                
    • dataExportMode

      タイプ:
      enumeration
      デフォルト:
      allRows

      すべてのサブレベル データがエクスポートされるか、あるいは展開行の下のデータのみをエクスポートするかどうかを示します。

      メンバー

      • allRows
      • タイプ:string
      • すべてのサブレベル データがエクスポートされます。
      • expandedRows
      • タイプ:string
      • 展開行の下のデータのみがエクスポートされます。

      コード サンプル

                  //Set
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {
                    //Setting the dataExportMode option
                    dataExportMode: "expandedRows",
                  });
                
    • fileName

      タイプ:
      string
      デフォルト:
      "document"

      生成される Excel ファイルの名前を指定します。

      コード サンプル

                  //Set
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {
                    //Setting the file name
                    fileName: "Document",
                  });
                
    • gridFeatureOptions

      タイプ:
      object
      デフォルト:
      {}

      グリッドの Excel エクスポーターと使用可能なエクスポート設定のリスト。

      • columnfixing

        タイプ:
        enumeration
        デフォルト:
        none

        エクスポートされた表で固定列が適用されるかどうかを示します。これはデフォルトで none に設定されますが、列固定機能が igGrid で定義される場合、applied に設定されます。

        メンバー

        • none
        • タイプ:string
        • 列固定は Excel 文書に適用されません。
        • applied
        • タイプ:string
        • 列固定は Excel 文書に適用されます。

        コード サンプル

         
        				        //Set
        				        $.ig.GridExcelExporter.exportGrid($(".selector"), {
        					        gridFeatureOptions: {
        						        // Exports without columnFixing enabled in the excel document
        						        columnFixing: "none"
        					        }
        				        });
        			      
      • filtering

        タイプ:
        enumeration
        デフォルト:
        none

        エクスポートされた表でフィルターが適用されるかどうかを示します。これはデフォルトで none に設定されますが、フィルター機能が igGrid で定義される場合、applied に設定されます。

        メンバー

        • none
        • タイプ:string
        • フィルターは Excel 文書に適用されません。
        • applied
        • タイプ:string
        • フィルターは Excel 文書に適用されます。
        • filteredRowsOnly
        • タイプ:string
        • フィルターは Excel 文書にエクスポートされます。

        コード サンプル

        				        //Set
        				        $.ig.GridExcelExporter.exportGrid($(".selector"), {
        					        gridFeatureOptions: {
        						        // Exports without filtering enabled in the excel document
        						        filtering: "none"
        					        }
        				        });
        			          
      • hiding

        タイプ:
        enumeration
        デフォルト:
        none

        エクスポートされた表で非表示列が削除されるかどうかを示します。これはデフォルトで none に設定されますが、非表示機能が igGrid で定義される場合、applied に設定されます。

        メンバー

        • none
        • タイプ:string
        • すべての非表示列は Excel 文書にエクスポートされます。
        • applied
        • タイプ:string
        • 非表示列は Excel 文書に非表示としてエクスポートされます。
        • visibleColumnsOnly
        • タイプ:string
        • 表示列のみエクスポートされます。

        コード サンプル

         
        				        //Set
        				        $.ig.GridExcelExporter.exportGrid($(".selector"), {
        					        gridFeatureOptions: {
        						        // No columns will be hidden in the excel document
        						        hiding: "none"
        					        }
        				        });
        			          
      • paging

        タイプ:
        enumeration
        デフォルト:
        allRows

        現在のページの行またはすべてのデータがエクスポートされるかどうかを示します。

        メンバー

        • currentPage
        • タイプ:string
        • 現在のページのみは Excel 文書にエクスポートされます。
        • allRows
        • タイプ:string
        • すべてのページは Excel 文書にエクスポートされます。

        コード サンプル

         
        				        //Set
        				        $.ig.GridExcelExporter.exportGrid($(".selector"), {
        					        gridFeatureOptions: {
        						        // Exports the currentPage in the excel document
        						        paging: "currentPage"
        					        }
        				        });
        			          
      • sorting

        タイプ:
        enumeration
        デフォルト:
        none

        エクスポートされた表で並べ替えが適用されるかどうかを示します。これはデフォルトで none に設定されますが、並べ替え機能が igGrid で定義される場合、applied に設定されます。

        メンバー

        • none
        • タイプ:string
        • 並べ替えは Excel 文書に適用されません。
        • applied
        • タイプ:string
        • 並べ替えは Excel 文書に適用されます。

        コード サンプル

         
        				        //Set
        				        $.ig.GridExcelExporter.exportGrid($(".selector"), {
        					        gridFeatureOptions: {
        						        // No sorting will be applied to the excel document
        						        sorting: "none"
        					        }
        				        });
        			          
      • summaries

        タイプ:
        enumeration
        デフォルト:
        none

        エクスポートされた表に集計が追加されるかどうかを示します。これはデフォルトで none に設定されますが、集計機能が igGrid で定義される場合、applied に設定されます。

        メンバー

        • none
        • タイプ:string
        • 集計は Excel 文書にエクスポートされません。
        • applied
        • タイプ:string
        • 集計は Excel 文書にエクスポートされます。

        コード サンプル

        				        //Set
        				        $.ig.GridExcelExporter.exportGrid($(".selector"), {
        					        gridFeatureOptions: {
        						        // No summaries will be applied to the excel document
        						        summaries: "none"
        					        }
        				        });
        			          
    • gridStyling

      タイプ:
      enumeration
      デフォルト:
      applied

      Excel 表スタイル設定はグリッドのスタイル設定と同じに設定されるかどうかを示します。これはデフォルトで applied に設定されています。カスタム グリッド テーマはサポートされません。

      メンバー

      • none
      • タイプ:string
      • グリッドのスタイル設定は表領域に適用されません。
      • applied
      • タイプ:string
      • グリッドのスタイル設定は表領域に適用されます。

      コード サンプル

       
      				      //Set
      				      $.ig.GridExcelExporter.exportGrid($(".selector"), {
      						      // Grid style will be exported to the excel table
      						      gridStyling: "applied"
      				      });
      		        
    • skipFilteringOn

      タイプ:
      array
      デフォルト:
      []
      要素タイプ:
      object

      フィルターが適用されないワークシート列のキーを含む文字列のリスト。

      コード サンプル

                  //Set
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {
                      // The keys of columns that filtering will skip
                      skipFilteringOn: ["column1", "column2", "column3"],
                   });
                
    • tableStyle

      タイプ:
      string
      デフォルト:
      "TableStyleMedium1"

      Excel 表のスタイル領域を指定します。
      以下の表スタイルを設定できます。
      TableStyleMedium[1-28]
      TableStyleLight[1-21]
      TableStyleDark[1-11].

      コード サンプル

                  //Set
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {
                    gridStyling: "none",
                    //Setting the table style to TableStyleDark
                    tableStyle: "TableStyleDark2" 
                  });
                
    • worksheetName

      タイプ:
      string
      デフォルト:
      "Sheet1"

      igGrid がエクスポートされるワークブックの名前を指定します。

      コード サンプル

                  //Set
                  $.ig.GridExcelExporter.exportGrid($(".selector"), {
                    //Setting the name of the worksheet
                    worksheetName: "Worksheet1",
                  });
                
このコントロールにイベントはありません。
  • ig.GridExcelExporter
    コンストラクター

    new $.ig.GridExcelExporter( );

  • exportGrid

    .exportGrid( grid:object, userSettings:object, userCallbacks:object );

    提供された igGrid を Excel 文書にエクスポートします。

    • grid
    • タイプ:object
    • エクスポートするグリッド。
    • userSettings
    • タイプ:object
    • グリッドのエクスポートの設定。
    • userCallbacks
    • タイプ:object
    • イベントのコールバック。

    コード サンプル

     
            //Set
            var exp = new $.ig.GridExcelExporter();
            exp.exportGrid($(".selector"), {
              fileName: "igGrid",
              gridFeatureOptions: {"sorting": "applied", "filtering": "applied", "paging": "currentPage"}
            });
          

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