在YUI Datatable中显示JSON对象

Question

我正在尝试使用YUI DataTable显示以下JSON对象。 我能够成功地在YUI DataTable中显示lastName，firstName，startDate，employeeCode，employeeStatus。 但是我无法显示内部对象中的值。 在列设置中，我尝试了user.userId，但在DataTable中显示为{value}。

[    
{
            "lastName": "MyLastName",
            "firstName": "MyFirstName",
            "startDate": "11-11-11",
            "employeeCode": "124",
            "employeeStatus": "Permanent",
            "user": {
                "key": {
                    "name": null,
                    "parent": {
                        "name": null,
                        "parent": null,
                        "id": 855,
                        "namespace": "",
                        "complete": true,
                        "kind": "Employee"
                    },
                    "id": 856,
                    "namespace": "",
                    "complete": true,
                    "kind": "Users"
                },
                "salt": null,
                "userId": "[e-mail]",
                "status": true,
},
{
...
}
]

这里是 JavaScript 代码：

<script type="text/javascript">
YUI().use("jsonp", 'sortable', 'json-parse', 'datatable', "datatable-sort", "io", "node", function(Y) {
var nestedCols = [ 
    {key : "employeeCode",label : "Employee Code", sortable:true},
    {key : "firstName", label : "First Name",sortable: true},
    {key : "lastName", label : "Last Name", sortable:true},
    {key : "user.userId", label : "Email Id"},
    ];
Y.io('/Employee/AjaxList', {
on : {
success : function(tx, r) {
var data = Y.JSON.parse(r.responseText);
var table = new Y.DataTable.Base({
        columnset : nestedCols,
        recordset : data,
        }).plug(Y.Plugin.DataTableSort);
        table.render("#empTable");
}
}
});
});
</script>

这段代码有什么问题吗？我该如何在DataTable中显示user.userId的值？

注意：JSON是使用Jackson生成的，应用程序是在GAE/J中开发的。

---

更新：

我按照@Luke的建议使用了DataSource。这一次我只得到了带有标题的空DataTable。以下是代码片段。

YUI().use("datasource-get", "datatable-base", "datatable-datasource","datasource-arrayschema", function (Y) {

var url = "/Employee/AjaxList?";
var dataSource, table;

dataSource = new Y.DataSource.Get({ source: url });

dataSource.plug(Y.Plugin.DataSourceArraySchema, {
        schema: {
                resultFields: ["firstName", "lastName"]
                }
        });

var cols = ["firstName", "lastName"];

table = new Y.DataTable.Base({
                columnset: cols,
});

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

table.render("#empTable");

table.datasource.load();
});

- libregeek

Answer 1

我在 YUI 论坛发帖后得到了解决方案：http://yuilibrary.com/forum/viewtopic.php?f=92&t=8685

以下是对我有效的代码：

YUI().use( "datasource-io", "datasource-jsonschema", "datatable-base", "datatable-datasource", "datatable-scroll", 
           function (Y) {
    var cols = [    
            { key: "name", label: 'Name'  }, 
            { key: "email",  label: "Email"  },
            { key: "user.username", label: 'Username'  },
            { key: "user.password", label: 'Password'  },
        ];
    car url = "/Employee/AjaxList";
    var ds = new Y.DataSource.IO( { 
        source:url
     });
     ds.plug(Y.Plugin.DataSourceJSONSchema, {
            schema: {
                resultFields: [ 'name', 'email', 'user.username', 'user.password' ],
            }
        });
    var dt = new Y.DataTable.Base({
        columnset:cols } )
        .plug(Y.Plugin.DataTableDataSource, {datasource:ds});
    dt.render("#dtable");
    dt.datasource.load();
});

希望这能帮助到其他正在苦苦挣扎于DataTable和DataSource的人。

- libregeek

Answer 2

您需要使用datasource-jsonschema来解析嵌套值。请参考此示例：http://yuilibrary.com/yui/docs/datatable/datatable-dsget.html

您应该能够按照这些步骤进行操作，将Y.DataSource.Get替换为Y.DataSource.IO

- Luke

---

我尝试使用数据源，但现在似乎YUI向服务器发送了错误的请求。这是我从firebug控制台获得的URL：http://localhost:8080/ExampleApp/Employee/AjaxListundefined&callback=YUI.Env.DataSource.callbacks.yui_3_4_0_1_1316763699238_127 正确的URL是http://localhost:8080/ExampleApp/Employee/AjaxList。 - libregeek

请忽略上面的评论，我通过在源URL末尾添加一个“？”来解决了这个问题。但是数据仍未填充到数据表中。我可以在Firebug控制台中看到JSON数据。 - libregeek

我已经使用datasource-arrayschema更新了问题中的脚本。我相信我得到的响应是一个数组，但我无法为datasource-jsonschema识别resultListLocator。 - libregeek