javascript - 如何使用复杂的 JSON 创建 YUI3 DataTable？

Question

我对 YUI 很陌生，在尝试从下面的 JSON 创建 YUI3 DataTable 时遇到问题 -

{

    "generations": [

    {
        "type": "Modern",
        "showName": "The Modern Generation",
        "imgURI": "file:/D:/projectGen.png",
        "relations": {
            "father": {
                "age": "49",
                "firstName": "George",
                "lastName": "Mathews",
                "priority": "1",
                "profession": "Service"
            },
            "mother": {
                "age": "47",
                "firstName": "Susan",
                "lastName": "Aldrin",
                "priority": "2",
                "profession": "Home-Maker"
            },
            "brother": {
                "age": "28",
                "firstName": "Martin",
                "lastName": "Mathews J",
                "priority": "3",
                "profession": "Engineer"
            },
            "sister": {
                "age": "23",
                "firstName": "Laura",
                "lastName": "Mathews J",
                "priority": "4",
                "profession": "Fashion Model"
            }
        }
    }
]

}

我需要创建的表应如下所示 -

有关如何执行此操作的任何信息？一个 JSFiddle 将不胜感激。

Answer 1

我希望这有帮助。http://jsfiddle.net/BM3kX/2/

HTML：

<div class="yui3-skin-sam" id="datatable"></div>​

Javascript：

YUI().use('datatable', 'datasource-local', 'datasource-jsonschema',function(Y){
    var data  = {};//JSON here
    var localDataSource = new Y.DataSource.Local({source:data});
    localDataSource.plug(Y.Plugin.DataSourceJSONSchema, {
        schema: {
            resultListLocator: 'generations',
            resultFields: [{key:'showName'},
                           {
                               key:'father',
                               locator:'relations.father.firstName'
                           },
                           {
                               key:'mother',
                               locator:'relations.mother.firstName'
                           },
                           {
                               key:'brother',
                               locator:'relations.brother.firstName'},
                           {
                               key:'sister',
                               locator:'relations.sister.firstName'
                           }]
        }
    });
    var table = new Y.DataTable({
        columns: ["showName", "father","mother","brother","sister"]
    });

    table.plug(Y.Plugin.DataTableDataSource, {
        datasource: localDataSource
    });

    table.render('#datatable');
    table.datasource.load();

});​