ui.igTree

ui.igTree_image

igTree コントロールはノード画像、チェックボックス、ロードオンデマンド機能をサポートする jQuery ツリー コントロールです。この API のクラス、オプション、イベント、メソッドおよびテーマに関する詳細は、上記の関連するタブを参照してください。

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

この API を使用して作業を開始するための情報はここをクリックしてください。igTree コントロールに必要なスクリプトとテーマを参照する方法については、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 src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
        var data = [
        { "Text": "IG Touring", "Value": "IG Touring", "Trips": [
            { "Text": "Rome", "Value": "Rome", "Packages": [
                { "Duration": "One Week", "Price": "$1178" },
                { "Duration": "Two Weeks", "Price": "$1997"}] },
            { "Text": "Paris", "Value": "Paris", "Packages": [
                { "Duration": "One Week", "Price": "$1549.99" },
                { "Duration": "Two Weeks", "Price": "$2799.99"}]
            }
        ]}];
        $(function () {
            //tree initialization
            $("#tree").igTree({
                singleBranchExpand: true,
                bindings: {
                    textKey: 'Text',
                    valueKey: 'Value',
                    childDataProperty: 'Trips',
                    bindings: {
                        textKey: 'Text',
                        valueKey: 'Value',
                        childDataProperty: 'Packages',
                        bindings: {
                            textKey: 'Duration',
                            valueKey: 'Price'
                        }
                    }
                },
                dataSource: data
            });
        });
    </script>
</head>
<body>
    <div id="tree"></div>
</body>
</html>
    

関連サンプル

関連トピック

依存関係

jquery.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.draggable.js
jquery.ui.droppable.js
infragistics.templating.js
infragistics.util.js
infragistics.util.jquery.js
infragistics.datasource.js
infragistics.ui.widget.js
infragistics.ui.tree-en.js

継承

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