ig.MashupDataSource

ig.MashupDataSource_image

MashupDataSource は、複数ソースからのデータの単一コレクションの作成に使用されます。ソースは共通プライマリ キー フィールドを使用して結合します。このクラスは mashupSettings のオプションを追加する DataSource クラスの拡張です。MashupDataSource コンポーネントの API の詳細については、基本 DataSource コンポーネントの API マニュアルを参照してください。この API のクラス、オプション、イベント、メソッドおよびテーマの詳細については、上記の関連するタブを参照してください。

以下のコードは、MashupDataSource コントロールの初期化方法を示します。

この API を使用した作業方法の詳細についてはここをクリックしてください。MashupDataSource コントロールの必要なスクリプトおよびテーマを参照する方法については、 「Ignite UI で JavaScript リソースを使用する」および Ignite UI のスタイル設定とテーマを参照してください。

コード サンプル

<!doctype html>
<html>
<head>
    <!-- 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 -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
 
    <script type="text/javascript">
    $(function () {
        var jsArray = new Array(), xmlDoc, xmlSchema, mashupSources, dsMashup;
 
        jsArray[0] = { "ID": 0, "Name": "Bread", "Description": "Whole grain bread" };
        jsArray[1] = { "ID": 1, "Name": "Milk", "Description": "Low fat milk" };
        jsArray[2] = { "ID": 2, "Name": "Vint soda", "Description": "Americana Variety - Mix of 6 flavors" };
        jsArray[3] = { "ID": 3, "Name": "Havina Cola", "Description": "The Original Key Lime Cola"};
        jsArray[4] = { "ID": 4, "Name": "Fruit Punch", "Description": "Mango flavor, 8.3 Ounce Cans (Pack of 24)"};
        jsArray[5] = { "ID": 5, "Name": "Cranberry Juice", "Description": "16-Ounce Plastic Bottles (Pack of 12)"};
        jsArray[6] = { "ID": 6, "Name": "Pink Lemonade", "Description": "36 Ounce Cans (Pack of 3)" };
        jsArray[7] = { "ID": 7, "Name": "DVD Player", "Description": "1080P Upconversion DVD Player" };
        jsArray[8] = { "ID": 8, "Name": "LCD HDTV", "Description": "42 inch 1080p LCD with Built-in Blu-ray Disc Player" };
 
        xmlDoc = "<feed>\r\n" +
                    "<entry>\r\n" +
                        "<id>0</id>\r\n    <title>Bread</title>\r\n    <summary>Whole grain bread</summary>\r\n    <content id=\"0\" rating=\"4\" price=\"2.5\"></content>\r\n </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>1</id>\r\n    <title>Milk</title>\r\n    <summary>Low fat milk</summary>\r\n    <content id=\"1\" rating=\"3\" price=\"3.5\"></content>\r\n  </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>2</id>\r\n    <title>Vint soda</title>\r\n    <summary>Americana Variety - Mix of 6 flavors</summary>\r\n    <content id=\"2\" rating=\"3\" price=\"20.9\"></content>\r\n  </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>3</id>\r\n    <title>Havina Cola</title>\r\n    <summary>The Original Key Lime Cola</summary>\r\n    <content id=\"3\" rating=\"3\" price=\"19.9\"></content>\r\n  </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>4</id>\r\n    <title>Fruit Punch</title>\r\n    <summary>Mango flavor, 8.3 Ounce Cans (Pack of 24)</summary>\r\n    <content id=\"4\" rating=\"3\" price=\"22.99\"></content>\r\n  </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>5</id>\r\n    <title>Cranberry Juice</title>\r\n    <summary>16-Ounce Plastic Bottles (Pack of 12)</summary>\r\n    <content id=\"5\" rating=\"3\" price=\"22.8\"></content>\r\n  </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>6</id>\r\n    <title>Pink Lemonade</title>\r\n    <summary>36 Ounce Cans (Pack of 3)</summary>\r\n    <content id=\"6\" rating=\"3\" price=\"18.8\"></content>\r\n  </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>7</id>\r\n    <title>DVD Player</title>\r\n    <summary>1080P Upconversion DVD Player</summary>\r\n    <content id=\"7\" rating=\"3\" price=\"35.88\"></content>\r\n  </entry>\r\n" +
                    "<entry>\r\n" +
                        "<id>8</id>\r\n    <title>LCD HDTV</title>\r\n    <summary>42 inch 1080p LCD with Built-in Blu-ray Disc Player</summary>\r\n    <content id=\"8\" rating=\"3\" price=\"1088.8\"></content>\r\n  </entry>\r\n" +
                "</feed>";           
         
        xmlSchema = new $.ig.DataSchema("xml", {
            fields: [
                { name : "ID", xpath: "id" },
                { name : "Rating", xpath: "content/@rating" },
                { name : "Price", xpath : "content/@price" }
            ],
            searchField: "//entry"
        });
             
        mashupSources = [
            { dataSource: jsArray, primaryKey: "ID" },
            { dataSource: xmlDoc, type: "xml", primaryKey: "ID" ,schema: xmlSchema }
        ];
             
        dsMashup = new $.ig.MashupDataSource({ dataSource: mashupSources });
        dsMashup.dataBind();
   
      var template = "<tr><td>${ID}</td><td>${Name}</td><td>${Description}</td><td>${Rating}</td><td>${Price}</td></tr>",
      resultHtml = $.ig.tmpl(template, dsMashup.dataView());
      $("#mashupDataSource").html(resultHtml);
    });
    </script>
</head>
<body>
    <table id="mashupDataSource">
        <thead></thead>
        <tbody></tbody>
    </table>
</body>
</html>

関連サンプル

関連トピック

依存関係

jquery.js
infragistics.util.js
infragistics.util.jquery.js

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