ig.JSONPDataSource

ig.JSONPDataSource_image

JSONPDataSource は DataSource クラスを拡張したものであり、デフォルトで、responseDataType オプションを「jsonp」に設定します。JSONPDataSource コンポーネントの API の詳細については、基本 DataSource コンポーネントの API マニュアルを参照してください。この API のクラス、オプション、イベント、メソッドおよびテーマの詳細については、上記の関連するタブを参照してください。

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

この API を使用した作業方法の詳細についてはここをクリックしてください。JSONPDataSource コントロールの必要なスクリプトおよびテーマを参照する方法については、 「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">
        var ds;
        var render = function (success, error) {
            if (success) {
          var template = "<tr><td>${ProductID}</td><td>${Name}</td><td>${ProductNumber}</td></tr>",
          resultHtml = $.ig.tmpl(template, ds.dataView());
          $("#table").html(resultHtml);
            } else {
                alert(error);
            }
        };
             
        $(function () {
            var oDataSchema = new $.ig.DataSchema("json", {
                fields: [{
                    name: "Name"
                }, {
                    name: "BoxArt"
                }, {
                    name: "Synopsis"
                }],
                searchField: "d.results"
            });
            var url = "http://odata.netflix.com/Catalog/Titles?$format=json&$callback=?";
 
            ds = new $.ig.JSONPDataSource({
                type: "remoteUrl",
                callback: render,
                dataSource: url,
                schema: oDataSchema,
                responseDataKey: "d.results",
                paging: {
                    enabled: true,
                    pageSize: 10
                }
            });
 
            ds.dataBind();
      });
    </script>
</head>
<body>
    <table id="table"></table>
</body>
</html>

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
infragistics.util.js
infragistics.util.jquery.js

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