ui.igHierarchicalGrid

ui.igHierarchicalGrid_image

igHierarchicalGrid コントロールは階層 jQuery グリッド コントロールです。フィルタリング、グループ化、列の非表示、ページング、列のサイズ変更、行セレクター、セルの選択、並べ替え、列集計、ツールチップ、および更新機能を提供します。機能の詳細について、API ドキュメントを参照してください。

igHierarchicalGrid コントロールはスタンドアロン フラットデータ igGrid コントロール上にビルドされています。igGrid コントロールの API は igHierarchicalGrid コントロールとその columnLayouts 設定の構成のベースとしての役割を果たします。igGrid の コントロールの API セクションを参照してください。

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

この API を使用した作業方法の詳細については、ここをクリックしてください。igHierarchicalGrid コントロールの必要なスクリプトおよびテーマを参照する方法については、 「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">
    $(function () {
        var jsonData = { "d": [
            {
                "ID": 0,
                "Name": "Food",
                "Category": { "ID": 0, "Name": "Food", "Active": true, "Date": "\/Date(1059660800000)\/" },
                "Products": [
                    { "ID": 0, "Name": "Bread", "Price": "2.5" }
                ]
            },
            {
                "ID": 1,
                "Name": "Beverages",
                "Category": { "ID": 2, "Name": "Beverages", "Active": true, "Date": "\/Date(1159660800000)\/" },
                "Products": [
                    { "ID": 1, "Name": "Milk", "Price": "3.5" },
                    { "ID": 2, "Name": "Vint soda", "Price": "20.9" }
                ]
            },
            {
                "ID": 2,
                "Name": "Electronics",
                "Category": { "ID": 5, "Name": "Electronics", "Active": false, "Date": "\/Date(1859660800000)\/" },
                "Products": [
                    { "ID": 7, "Name": "DVD Player", "Price": "35.88" },
                    { "ID": 8, "Name": "LCD HDTV", "Price": "1088.8" }
                ]
            }
        ]}
 
        $("#hierarchicalGrid").igHierarchicalGrid({
            initialDataBindDepth: 1,
            dataSource: jsonData,
            dataSourceType: "json",
            responseDataKey: "d",
 
            autoGenerateColumns: false,
            primaryKey: "ID",
            columns: [
                { headerText: "ID", key: "ID", width: "50px", dataType: "number" },
                { headerText: "Name", key: "Name", width: "130px", dataType: "string" }
            ],
            autoGenerateLayouts: false,
            columnLayouts: [
            {
                key: "Products",
                responseDataKey: "",
                childrenDataProperty: "Products",
                autoGenerateColumns: false,
                primaryKey: "ID",
                columns: [
                    { key: "ID", headerText: "ID", width: "25px" },
                    { key: "Name", headerText: "Product Name", width: "90px" },
                    { key: "Price", headerText: "Price", dataType: "number", width: "55px" }
                ]
            }
        ]
        });
    });
    </script>
</head>
<body>
<table id="hierarchicalGrid"></table>
</body>

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.ui.widget.js
infragistics.datasource.js
infragistics.ui.shared.js
infragistics.util.js
infragistics.ui.grid.framework.js

継承

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