javascript - 使用 Alloy UI 显示 JSON 数据

Question

我只是尝试解析 json 数据并使用 Alloy UI 的框架将其显示在数据表中

YUI().use(
    'aui-datatable', 'json-parse', 
    function(Y) {
        var columns = [
            { key: 'ID', sortable: true },
            { key: 'Name', sortable: true }
        ];
        var jsonstring = '{"info":['+
                     '{"ID":"100", "Name":"Roy"},'+
                     '{"ID":"200", "Name":"Moss"},'+
                     '{"ID":"300", "Name":"Jen"}'+
        ']}';
        try {
           data = Y.JSON.parse(jsonstring);
        }
        catch (e) {
            alert("Invalid data");
        }
        new Y.DataTable(
            {
                columns: columns,
                data: data
            }
        ).render("#mySearchResultsContainer");
    }

1) 如何将 ID 和名称映射到数据表中的列？

2) 如何使用外部 json 文件中的数据来完成此操作？

Answer 1

给你:http://jsfiddle.net/9wd8jqtL/

主要问题是您传递到 DataTable 的数据需要是一个数组:您传递的是对象。传入 data.info 为其提供您想要的数组:

 new Y.DataTable(
        {
            columns: columns,
            data: data.info
        }
    ).render("#mySearchResultsContainer");

此外，我认为您需要以某种方式包含 Alloy UI 数据表脚本。我当然在 jsfiddle 上做了使其工作(而且我认为 jsfiddle 上较新版本的 YUI 也可能存在问题)，但这在其他地方不应该是问题。

获取外部数据时，取决于它来自哪里。但很可能您需要 Y.io 或类似工具来加载数据，并在数据返回时在回调中使用建表函数。