ig.DataSource

ig.DataSource_image

igDataSource コンポーネントはクライアント側のコンポーネントであり、データのフィルタリング、ページング、並べ替え、集計、および更新をサポートします。このコンポーネントはまた、igHierarchicalGrid および igTree コントロールに対して、階層的データ バインドおよびロードオンデマンドのサポートを提供します。JSON、XML、HTML テーブル、WCF/REST サービス、JSONP、JSONP と OData の組み合わせなど、各種のデータ ソースに対するバインドをサポートしています。データ ソースの基本クラスを拡張するその他のクラスは、以下のような、指定されたデータ タイプで事前構成されています。 igArrayDataSourceigFunctionDataSourceigTableDataSourceigJSONDataSourceigJSONPDataSourceigRemoteDataSource、および igXmlDataSource。この API のクラス、イベント、メソッドおよびテーマの詳細については、上記の関連するタブを参照してください。

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

この API を使用した作業方法の詳細についてはここをクリックしてください。DataSource コントロールの必要なスクリプトおよびテーマを参照する方法については、 「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);
            }
        };
 
        var products = [];
  
        products[0] = {
            "ProductID": 1,
            "Name": "Adjustable Race",
            "ProductNumber": "AR-5381",
            "Category":  { "ID": 1, "Name 1": "Food 1" , "Date": "\/Date(1059660800000)\/"  }
        };
        products[1] = {
            "ProductID": 2,
            "Name": "Bearing Ball",
            "ProductNumber": "BA-8327",
            "Category":  { "ID": 2, "Name 2": "Food 2" , "Date": "\/Date(1259660800000)\/"  }
        };
  
        $(function () {
            ds = new $.ig.DataSource({
                dataSource: products,
                callback: render
            });
  
            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.