バージョン

igPivotGrid の HTML ページへの追加

トピックの概要

目的

このトピックは、 HTML ページへ igPivotGrid™ コントロールを追加する方法について概念と詳しい手順の両方から説明します。

前提条件

このトピックを理解するために、以下のトピックを参照することをお勧めします。

  • Ignite UI for jQuery で JavaScript リソースを使用: このトピックは、必要な JavaScript リソースを追加して Ignite UI for jQuery ライブラリからコントロールを使用する場合の全般的なガイダンスを提供します。

  • igPivotGrid の概要: このトピックは、主要機能、最小要件、ユーザー機能性など、igPivotGrid コントロールに関する概念的な情報を提供します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

igPivotGrid を HTML ページに追加 - 概要

igPivotGrid 追加の概要

igPivotGrid は、igOlapFlatDataSource™ または igOlapXmlaDataSource™ のコンポーネントを使用して操作します。したがって、igPivotGrid を HTML ページに追加する場合、内部で作成できるように、事前に構成されたデータ ソース インスタンスを提供するか、必要なオプションを指定する必要があります。

データ ソースは、igPivotGrid の dataSource パラメータまたは dataSourceOptions プロパティを介して指定します。データ ソースの設定は、igPivotGrid の初期化時に唯一設定しなければならない強制オプションです。

要件

以下の表で、igPivotGrid コントロールの要件を簡単に説明します。

必要なリソース 説明 必要な作業
jQuery および jQuery UI JavaScript リソース Ignite UI for jQuery™ は、以下のフレームワークの最上部にビルドされます。 ページの <head> セクションで両方のライブラリにスクリプト参照を追加します。
Modernizr ライブラリ (オプション) Modernizr ライブラリは、ブラウザとデバイス機能を検出するために igPivotGrid で使用されます。これは強制ではありませんが、含まれないとコントロールは HTML 互換ブラウザーで標準のデスクトップ環境であるかのように振る舞います。 ページの <head> セクションでライブラリにスクリプト参照を追加します。
全般的な igPivotGrid JavaScript リソース Ignite UI for jQuery ライブラリの igPivotGrid 機能性は、複数のファイルに渡って配布されます。必要なリソースは以下の方法で読み込むことができます。
  • カスタム JavaScript ファイルを含む: これは Ignite UI for jQuery JavaScript ファイルを参照する方法です。Ignite UI for jQuery コントロールのカスタム ダウンロードを作成できます。
  • Infragistics Loader の使用: Infragistics Loader は、すべての Infragistics リソース (スタイルおよびスクリプト) を解決するために使用されます。
  • 必要なリソースを手動で読み込みます。以下の表にリストされる依存関係を使用する必要があります。
以下の表は、igPivotGrid コントロール関連の Ignite UI for jQuery ライブラリの依存関係を示します。これらのリソースは、リソースを手動で取り込むことを選択する場合は明示的に参照される必要があります (igLoader は使用しない)。
JavaScript リソース 説明
infragistics.util.js
infragistics.util.jquery.js 		Ignite UI for jQuery ユーティリティ
(条件付き- igOlapFlatDataSource を使用する場合) infragistics.datasource.js igDataSource™ コンポーネント
infragistics.olapflatdatasource.js または infragistics.olapxmladatasource.js データ ソース フレームワーク
infragistics.templating.js テンプレート エンジン (igTemplate™)
infragistics.ui.shared.js Ignite UI for jQuery 共有コード
infragistics.ui.scroll.js 内部仕様されるスクロール ヘルパー
infragistics.ui.grid.framework.js igGrid™ コントロール
infragistics.ui.grid.multicolumnheaders.js igGrid コントロール用のマルチ列ヘッダー機能
infragistics.ui.pivot.shared.js ピボット コンポーネント用の Ignite UI for jQuery 共有コード
infragistics.ui.pivotgrid.js igPivotGrid コントロール

以下のいずれかを追加します。
  • カスタム JavaScript ファイルへの参照
  • igLoader への参照
  • すべての必要な JavaScript ファイルへの参照 (左側の表に一覧表示)
IG テーマ (オプション) このテーマには、Ignite UI for jQuery ライブラリ用のビジュアル スタイルが含まれます。テーマ ファイル:
  • <IG CSS root>/themes/Infragistics/infragistics.theme.css
igPivotGrid CSS resources file 以下の CSS ファイルからのスタイルは、コントロールの各種要素のレンダリングに使用されます。
  • <IG CSS root>/structure/modules/infragistics.ui.shared.css
  • <IG CSS root>/structure/modules/infragistics.ui.grid.css
  • <IG CSS root>/structure/modules/infragistics.ui.pivot.css
 ページのファイルにスタイル参照を追加します。

手順

igPivotGrid を HTML ページへ追加するための一般的な手順をおおまかに示すと、次のようになります。

  1. 必要なリソースへの参照の追加

  2. igPivotGrid により必要な HTML マークアップを追加します。

  3. データ ソースを追加する

  4. igPivotGrid の初期化

igPivotGrid の HTML ページへの追加 - 手順

概要

以下のプロシージャは、Adventure Works サンプル データベースをビジュアル化する HTML アプリケーションに igPivotGrid コントロールを追加する方法をコード例を用いてデモします。プロシージャは Infragistics Loader (igLoader) を使用して、推奨オプションである必要なリソースを参照します。

プレビュー

以下のスクリーンショットは最終結果のプレビューです。

前提条件

この手順を実行するには、以下のリソースが必要です。

  • Adventure Works サンプル データベース
  • $.ig.OlapXmlaDataSource オブジェクトまたは $.ig.OlapFlatDataSource オブジェクトのインスタンス

概要

  1. 必要なリソースへの参照の追加

  2. igPivotGrid により必要な HTML マークアップを追加します。

  3. データ ソースを追加する

  4. igPivotGrid の初期化

手順

以下の手順では、jQuery igPivotGrid を初期化する方法を紹介します。

  1. 必要なリソースへの参照を追加します。

    1. 必要なファイルを構造化します。

      A. jQuery、jQueryUI および Modernizr JavaScript のリソースを Web ページが置かれているディレクトリ内の Scripts という名前のフォルダーに追加します。

      B. Content/ig という名前のフォルダーに Ignite UI for jQuery CSS ファイルを追加します (詳細は、Ignite UI for jQuery のスタイル設定とテーマ設定のトピックを参照してください)。

      C. Ignite UI for jQuery JavaScript ファイルを Web サイト　またはアプリケーション内の Scripts/ig という名前のフォルダーに追加します (詳細は 「Ignite UI for jQuery での JavaScript リソースの使用」 トピックを参照)。

    2. 必要な JavaScript ライブラリへの参照を追加します。

      jQuery、jQuery UI および Modernizr ライブラリの参照をページの <head> セクションに追加します。

      HTML の場合:

       <script  type="text/javascript" src="Scripts/jquery.js"></script>
 <script  type="text/javascript" src="Scripts/jquery-ui.js"></script>
 <script  type="text/javascript" src="Scripts/modernizr.js"></script>

    3. igLoader への参照を追加します。igLoader スクリプトをページに含めます。

      HTML の場合:

       <script  type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>

    4. 必要なリソースをロードします。

      igLoader をインスタンス化します。

      HTML の場合:

       <script type="text/javascript">
     $.ig.loader({
         scriptPath: "Scripts/ig/",
         cssPath: "Content/ig/",
         resources: “igPivotGrid,igOlapXmlaDataSource"
     });
 <script>

  2. igPivotGrid により必要な HTML マークアップを追加します。

    HTML ページに “pivotGrid” の id で table タグを作成します。

    HTML の場合:

     <table id="pivotGrid"></table>

  3. データ ソースを追加します。

    データ ソース宣言を追加します。

    JavaScript の場合:

     $.ig.loader(function () {    
         var dataSource = new $.ig.OlapXmlaDataSource({
         serverUrl: "http://sampledata.infragistics.com/olap/msmdpump.dll",
         catalog: "Adventure Works DW Standard Edition",
         cube: "Adventure Works",
         measureGroup: "Internet Sales",
         rows: "[Sales Territory].[Sales Territory]",
         columns: "[Product].[Product Categories]",
         measures: "[Measures].[Internet Order Count],[Measures].[Internet Gross Profit Margin]"
     });
 });

    このデータ ソースを IE で正しく操作するには、データ ソース宣言を追加する前に、jQuery クロスオリジン要求のサポートを true に設定する必要があります。

    JavaScript の場合:

     $.support.cors = true;

  4. igPivotGrid を初期化します。

    igPivotGrid コントロールを初期化します。

    JavaScript の場合:

     $.ig.loader(function () {
     // add data source declaration here
     $("#pivotGrid").igPivotGrid({
         dataSource: dataSource
     });
 });

    以下は、igPivotDataSelector の dataSourceOptionsプロパティを使用してデータ ソースを指定するオルタナティブな (直接の) 方法です。(「igPivotGrid の追加のサマリー」を参照してください)

    JavaScript の場合:

     $("#pivotGrid").igPivotGrid({
       dataSourceOptions: {
         xmlaOptions:{
           serverUrl: " http://sampledata.infragistics.com/olap/msmdpump.dll ",
           catalog: "Adventure Works DW Standard Edition ",
           cube: "Adventure Works",
           measureGroup: "Internet Sales",
         },
           rows: "[Sales Territory].[Sales Territory]",
           columns: "[Product].[Product Categories]",
           measures: "[Measures].[Internet Order Count],[Measures].[Internet Gross Profit Margin]"
 }});

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

  • Ignite UI for MVC igPivotGrid の追加: このトピックは、 ASP.NET MVC ヘルパーを使用して ASP.NET MVC アプリケーションへ igPivotGrid™ コントロールを追加する方法について説明します。

サンプル

このトピックについては、以下のサンプルも参照してください。

オンラインで表示: GitHub