Wijmo UI for the Web
Excel としてエクスポート
Wijmo ユーザーガイド > 概念 > エクスポート > グリッドのエクスポート > Excel としてエクスポート
全て展開全て展開
すべて折りたたむすべて折りたたむ

ここでは、HTML マークアップおよび jQuery スクリプトを使用して、HTML プロジェクトに gridexport および wijgrid への参照を追加し、3 つの Excel エクスポートタイプを選択して追加する方法について、詳しく説明します。

Excel の設定

ドロップダウンして、グリッドのエクスポートに使用可能な Excel 設定についての情報を表示します。

クイックスタート

  1. テキストエディタで新規の HTML ページを作成するには、下記コードを追加して文章を .html の拡張子で保存します。

    ドロップダウンしてマークアップをコピーします

  2. 依存ファイルへのリンクを HTML ページの <head>タグ内に追加します。最新の依存ファイルについては、「wijmo cdn」にあるコンテンツ配信ネットワーク（CDN）ファイルを参照してください。

    ドロップダウンしてマークアップをコピーし、body タグ内に貼り付けます。

  3. <body>タグ内に次のマークアップを追加して、グリッドウィジェット、ドロップダウンセレクタ、およびボタンを作成します。
    • <table>要素はグリッドウィジェットを作成します。jQuery 内では、このid属性を呼び出すことでウィジェットを初期化します。
    • <input> 要素はボタンを作成します。jQuery 内でこの id 属性を呼び出すことで、クリックの実行時にグリッドをエクスポートします。
    • <select>要素はドロップダウンリストを作成します。jQuery 内では、このid属性を呼び出すことで値を収集しexportFileTypeオプションで使用します。
    スクリプト
    コードのコピー 
    <table id="wijgrid" /> 
<input type="button" value="Export to Excel" id="exportXLS"/>
<select id="exporttype">
    <option selected="selected" value="Xls">Export To XLS</option>
    <option value="Xlsx">Export To XLSX</option>
    <option value="Csv">Export To CSV</option>
</select>
  4. <head>タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、ウィジェットを初期化してデータを供給します。また、ボタンがクリックされると、以下の設定を使用してグリッドをエクスポートします。
    • <select>ドロップダウンから選択された、エクスポートタイプを示す値を収集します。
    • グリッドエクスポート用 API へのパスは、ComponentOne デモサーバーに転送されます。
    • エクスポートするグリッドは、wijgrid ウィジェットのマークアップに指定された id 属性として設定されます。
    • エクスポートするファイルの種類は、type 変数から取得されます。
    • エクスポートするファイルの名前は MyGridExport に設定されます。
    スクリプト
    コードのコピー 
    <script id="scriptInit" type="text/javascript">
require(["wijmo.wijgrid", "gridexport"], function () {
    $(document).ready(function () {
        $("#wijgrid").wijgrid({
            cellClicked: function (e, args) {
                alert(args.cell.value());
            },
            allowSorting: true,
            data: [
                [27, 'Canada', 'Adams, Craig', 'RW'],
                [43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
                [24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
                [87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
                [1, 'United States', 'Curry, John', 'G', 'L'],
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Country"},
                {headerText: "Player"},
                {headerText: "Position"}
            ]
        });
    });
    $("#exportXLS").button().click(function () {
        var type = $("#exporttype").val();
        wijmo.exporter.exportGrid({
            serviceUrl: "http://demos.componentone.com/ASPNET/ExportService/exportapi/grid",
            grid: $("#wijgrid").data("wijmo-wijgrid"),
            fileName: "MyGridExport",
            exportFileType: wijmo.exporter.ExportFileType[type],
            excel: {
                author: "Ninja Code Monkey",
                autoRowHeight: true
            }
        });
    });
});
</script>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。エクスポートタイプをドロップダウンして、任意の Excel タイプを選択し、［Export to Excel］ ボタンをクリックします。ダウンロードフォルダにファイルがエクスポートされます。

関連トピック

ExcelSetting インターフェース

 

 

Copyright © GrapeCity inc. All rights reserved.