igHierarchicalGrid をローカル データにバインド

トピックの概要

目的

本トピックは、ローカル データ (JSON または XML) にバインドするために igHierarchicalGrid™ の構成方法について説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

• JSON データへのバインド
• XML データへのバインド
• 関連コンテンツ

JSON データへのバインド

igHierarchicalGrid は、階層構造で JSON オブジェクトへバインドして指定したレイアウトで表示できます。

例：

    var northwind = {

    "results": [{
    "EmployeeID": 1,
    "LastName": "Davolio",
    "FirstName": "Nancy",
    "Title": "Sales Representative",
    "Address": "507 - 20th Ave. E.\r\nApt. 2A",
    "City": "Seattle",
    "Orders": {
        "results": [{
            "OrderID": 10258,
            "CustomerID": "ERNSH",
            "ShipName": "Ernst Handel",
            "ShipAddress": "Kirchgasse 6",
            "ShipCity": "Graz",
            "ShipCountry": "Austria"
            },
            ...
            }
    },
    ...
    ]
    }

このサンプルの JSON データを使用するため、階層グリッドを正しく構成するには、次のオプションを設定する必要があります。

columnLayouts を定義する代わりに、autoGenerateLayouts を true に設定してデータに基づいたレイアウトを igHierarchicalGrid で作成できます。

サンプルでこの構成の結果を確認できます。

XML データへのバインド

igHierarchicalGrid は、階層構造で XML データへバインドして指定したレイアウトを表示できます。

例:

var xmlDoc = '<OrgChart Name="All Employees">' +
    '<Employee Name="Gustavo Achong" Age="42" Email="gachong@adventureworks.com">' +
        '<Employee Name="Kim Abercrombie" Age="33" Email="kabercrombie@adventureworks.com" />' +
        '<Employee Name="Lawrence Tapley" Age="52" Email="ltapley@adventureworks.com" />' +
    '</Employee>' +
    '<Employee Name="Catherine Abel" Age="27" Email="cabel@adventureworks.com">' +
        '<Employee Name="Kristen Anderson" Age="30" Email="kanderson@adventureworks.com" />' +
        '<Employee Name="Richard Lee" Age="25" Email="rlee@adventureworks.com" />' +
        '<Employee Name="Victoria Gramley" Age="23" Email="vgramley@adventureworks.com" />' +
    '</Employee>' +
    '<Employee Name="Adrienne Mauro" Age="27" Email="amauro@adventureworks.com">' +
        '<Employee Name="Christopher Chadwick" Age="37" Email="cchadwick@adventureworks.com" />' +
    '</Employee>' +
'</OrgChart>'

同じオプションと設定が JSON データに適用されますが dataSource オプション設定は除外されます。 dataSource オプションを XML データに直接設定する代わりに、データを igDataSource インスタンスで最初に定義し、そのインスタンスを dataSource オプションに割り当てます。 XML データを使用時にデータ フィールドを定義するために dataSource のスキーマを指定する必要があります。

はじめに igDataSource のスキーマを定義します。スキーマに以下のオプションを設定する必要があります。

var xmlSchema = new $.ig.DataSchema("xml",
    {
        //searchField は XPaths のベース ノードとして動作します
        searchField: "OrgChart",
        childDataProperty: "Employee",
        fields: [
            { name: "Name", xpath: "@Name" },
            { name: "Age", xpath: "@Age" },
            { name: "Email", xpath: "@Email" },
            { name: "Employee", xpath: "Employee" }
        ]
    }
);

次に定義済みのスキーマと xml doc を使用する igDataSource を定義します。

    var ds = new $.ig.DataSource({
        type: "xml",
        dataSource: xmlDoc,
        schema: xmlSchema
    });

このデータ ソースを igHierarchicalGrid の dataSource に割り当てることができます。

 $("#hierarchicalGrid1").igHierarchicalGrid({
    dataSource: ds, //$.ig.DataSource object defined above
    ...
    }):

以下のサンプルは、この構成の結果です。

関連コンテンツ

• igHierarchicalGrid の初期化
• igHierarchicalGrid の列とレイアウト