YUI DataTable动态加载列def

Question

我正在使用YUI数据表进行前端项目以显示一些数据。我使用的是Spring MVC框架，控制器将从数据库中获取数据并将其以JSON格式返回给视图。

我的数据源是一个返回JSON数据的网址。但是，因为JSON数据是从我从数据库中提取的数据生成的。因此，数据表的列号不固定。

有没有办法可以从我的数据源动态加载ColumnDef来渲染数据表？

这是我尝试使用sample.jsp中的简单数据的方法，但不知何故它不起作用：

<script type="text/javascript">
YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Basic = function() {
        var myData = {"userInfo":[
                                   {"name":"Smith, Paul","age": "7","level":"","experience":"31","subtotal":"$0.00"},
                                   {"name":"Jones, Steve","age":"","level":"","experience":"60","subtotal":"$0.00"},
                                   {"name":"Dow, James","age":"","level":"","experience":"31","subtotal":"$0.00"},
                                   {"name":"Reid, Jake","age":"","level":"","experience":"6","subtotal":"$10.00"},
                                   {"name":"Smith, Nancy","age":"34","level":"3r","experience":"8","subtotal":"$0.00"}
                               ]};

    function getColumns(o, key) {
        var k, cols = [], value = o[key][0];

        if (value && typeof value === 'object') {
            for (k in value) {
                if (value.hasOwnProperty(k)) {
                    getColumns(value, k);
                    if (value.constructor !== Array) {
                        cols.push(k);
                    }
                }
            }
        }

        return cols;
    }

    var myColumns = getColumns(myData, "userInfo");

    var myDataSource = new YAHOO.util.DataSource(myData);
    myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
    myDataSource.responseSchema = {
            fields: columns
        };
    var myDataTable = new YAHOO.widget.DataTable("dataTable",
            myColumns, myDataSource, {initialLoad: true, caption: tableCaption});

    return {
        oDS: myDataSource,
        oDT: myDataTable
    };

}();

}）;