ig.XmlDataSource

ig.XmlDataSource_image

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

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

この API を使用した作業方法の詳細についてはここをクリックしてください。XmlDataSource コントロールの必要なスクリプトおよびテーマを参照する方法については、 「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 xmlString = "<personContacts>\r\n" +
                "<person>\r\n" +
                    "<generalInfo contactID=\"1\" firstName=\"Gustavo\"\r\n  lastName=\"Achong\" emailPromotion=\"true\">\r\n    gustavo0@adventure-works.com</generalInfo>\r\n" +
                    "<modifiedDate FictionalFloat=\"0.31831\">May 16 2005\r\n 4:33</modifiedDate>\r\n" +
                "</person>\r\n" +
                "<person>\r\n" +
                    "<generalInfo contactID=\"2\" firstName=\"Catherine\"\r\n middleName=\"R.\" lastName=\"Abel\" emailPromotion=\"true\">\r\n    catherine0@adventure-works.com</generalInfo>\r\n" +
                    "<modifiedDate FictionalFloat=\"0.63662\">May 16 2005\r\n 4:33</modifiedDate>\r\n" +
                "</person>\r\n" +
                "<person>\r\n" +
                    "<generalInfo contactID=\"3\" firstName=\"Kim\"\r\n lastName=\"Abercrombie\" emailPromotion=\"false\">\r\n    kim2@adventure-works.com</generalInfo>\r\n" +
                    "<modifiedDate FictionalFloat=\"0.95493\">May 16 2005\r\n 4:33</modifiedDate>\r\n" +
                "</person>\r\n" +
            "</personContacts>";
             
            xmlSchema = new $.ig.DataSchema("xml", {
                fields: [
                { name: "FirstName", xpath: "generalInfo/@firstName" },
                { name: "LastName", xpath: "generalInfo/@lastName" },
                { name: "Email", xpath: "generalInfo"}],
                searchField: "//person"
            });
 
            ds = new $.ig.XmlDataSource({
                dataSource: xmlString,
                schema: xmlSchema
            });
 
            ds.dataBind();
 
            var template = "<tr><td>${FirstName}</td><td>${LastName}</td><td>${Email}</td></tr>",
            resultHtml = $.ig.tmpl(template, ds.dataView());
            $("#t1").html(resultHtml);
        });
    </script>
</head>
<body>
    <table id="t1" class="standard-grid">
        <thead></thead>
        <tbody></tbody>
    </table>
</body>
</html>

関連サンプル

関連トピック

依存関係

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

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