ig.TreeHierarchicalDataSource

ig.TreeHierarchicalDataSource_image

igTreeHierarchicalDataSource コンポーネントは、igDataSource を拡張し、全般スキーマの階層データのサポートを追加するクライアント側コンポーネントです。フィルター、ページング、並べ替え、更新、およびロードオンデマンド サポートを提供します。フラットおよび階層データ ソースへのバインドのサポートもあります。このコンポーネントは igTreeGrid コントロールにより使用されます。この API のクラス、イベント、メソッドおよびテーマに関する詳細は、上記の関連タブを参照してください。

以下のコード スニペットは、TreeHierarchicalDataSource コントロールを初期化する方法を示します。

TreeHierarchicalDataSource コントロールに必要なスクリプトとテーマを参照する方法については、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" />
    <style>
        table { width:100%; border-top:1px solid #b1b1b1; border-right:1px solid #b1b1b1; border-spacing: 0;}
        table th, table td { text-align:left; border-bottom:1px solid #b1b1b1; border-left:1px solid #b1b1b1; padding:4px;}
        span[data-level="1"] {
            padding-left: 20px;
        }
        span[data-level="2"] {
            padding-left: 40px;
        }
    </style>
    <!-- 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 products  = [
            { "ID": 0, "Name": "Food", "Price": "-", "Category": { "ID": 0, "Name": "Name", "isActive": false }, "Products": [
                {"ID": 15, "Name": "Sandwich", "Price": "-", "Products": [
                    { "ID": 16, "Name": "Club sandwich", "Price": "3.5" }
                ] }
            ]},
            { "ID": 17, "Name": "Accessories", "Price": "-", "Category": { "ID": 1, "Name": "Name1", "isActive": false } },
            {
                "ID": 19, "Name": "Toys", "Price": "-", "Category": { "ID": 2, "Name": "Name2", "isActive": false }, "Products": [
                    { "ID": 20, "Name": "Action Figures", "Price": "3.5" }
                ]
            }
       ];
       $(function () {
            function render(success, error, ds) {
                if (success) {
                    var template = "<tr><td><span data-level='${dataLevel}'>${ID}</span></td><td>${Name}</td><td>${Price}</td></tr>",
                    resultHtml = $.ig.tmpl(template, ds.flatDataView());
                    $("#table").html(resultHtml);
                } else {
                    alert(error);
                }
            }
            var ds = new $.ig.TreeHierarchicalDataSource({
                dataSource: products,
                callback: render,
                treeDS: {
                    childDataKey: "Products",
                    initialExpandDepth: 10,
                    propertyDataLevel: "dataLevel"
                }
            });
                ds.dataBind();
       });
    </script>
</head>
<body>
    <table id="table"></table>
</body>
</html>

依存関係

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

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