ig.GridExcelExporter
コード サンプル
<!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>
関連サンプル
- 基本グリッドを Excel にエクスポート
- 機能とグリッドを Excel へエクスポート
- グリッド Excel エクスポートのカスタマイズ
- 進行状況インジケーターとグリッドを Excel へエクスポート
関連トピック
依存関係
-
callbacks
- タイプ:
- object
- デフォルト:
- {}
エクスポーター イベントのコールバック。
-
cellExported
- タイプ:
- function
- デフォルト:
- 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
- タイプ:
- function
- デフォルト:
- 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
- タイプ:
- function
- デフォルト:
- null
エクスポートの失敗で発生するコールバックを設定します。
error を使用して、エラー オブジェクトへの参照を取得します。コード サンプル
//Initialize $.ig.GridExcelExporter.exportGrid($(".selector"), {}, { error: function(error) { //returns reference to the error object error; } });
-
exportEnding
- タイプ:
- function
- デフォルト:
- 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
- タイプ:
- function
- デフォルト:
- 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
- タイプ:
- function
- デフォルト:
- 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
- タイプ:
- function
- デフォルト:
- 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
- タイプ:
- function
- デフォルト:
- 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; //returns reference to the grid widget. args.grid } });
-
rowExporting
- タイプ:
- function
- デフォルト:
- 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
- タイプ:
- function
- デフォルト:
- null
エクスポートの成功で発生するコールバックを設定します。
data を使用して、保存されたオブジェクトへの参照を取得します。コード サンプル
//Initialize $.ig.GridExcelExporter.exportGrid($(".selector"), {}, { success: function(sender, data) { //returns a reference to the igGridExporter class sender //returns exported data data } });
-
summaryExported
- タイプ:
- function
- デフォルト:
- 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
- タイプ:
- function
- デフォルト:
- 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"} });