Question

我正在尝试使用YUI数据表来显示来自JSON对象的数据，如下所示：

{"results":[{"label":"Column 1","notes":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. "},{"label":"Column 2","notes":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"label":"Column 3","notes":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. "},{"label":"Column 4","notes":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"label":"Column 5","notes":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"label":"Column 6","notes":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. "}]}

我可以使用标准实现做到这一点。但是，列名称（上面对象中的标签）是动态的，所以在数据到达页面之前我不会知道它们。因此，我想从doBeforeParseData（）中的数据源定义列定义。

从阅读/ IRC，有人建议我应该能够在数据表中添加列。我希望桌子看起来像这样：

第1栏第2栏.......

注意事项.....

所以上面的数据应该产生一行数据。这是我到目前为止所做的：

function loadTable() {

  YAHOO.example.Basic = function() {


    var myColumnDefs = [];

    var myDataSource = new YAHOO.util.DataSource("/index/testajax");
    myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;


    myDataSource.doBeforeParseData = function (oRequest, oFullResponse, oCallback) {

       // alert(oFullResponse);

        var colDefs = [];
        var len = oFullResponse.results.length;
        for (var i = 0; i < len; i++) {
            var obj = {
                key: oFullResponse.results[i].label,
                sortable: true,
                resizeable: true
            };
            myColumnDefs.push(obj);

        }
            console.log(myColumnDefs);  
        return oFullResponse;
    };

    myDataSource.responseSchema = {
        resultsList:"results",
        fields: ["label","notes"]
    };

    var myDataTable = new YAHOO.widget.DataTable("json",
            myColumnDefs, myDataSource, {caption:"DataTable Caption"});

    return {
        oDS: myDataSource,
        oDT: myDataTable
    };
}();


}

如果有关于如何做到这一点的任何意见而不是为什么我不应该这样做，我将不胜感激; - ）

感谢，

codecowboy

Answer 1

我花了一点午餐时间，但我找到了适合你的东西。我看了你的JSON，你做的方式在数据表中不起作用。结果是一个列表，每个条目都是一行，每个属性都是一列。这是我想出的json，希望对你有用。

{
    "resultSet":{
        "columnList":[
            {"key":"Column1","label":"My Col 1"},
            {"key":"Column2","label":"My Col 2"},
            {"key":"Column3","label":"My Col 3"}
        ],
        "results":[
            {
                "Column1":"Row 1 value",
                "Column2":"Row 1 value",
                "Column3":"Row 1 value"
            },
            {
                "Column1":"Row 2 value",
                "Column2":"Row 2 value",
                "Column3":"Row 2 value"
            }
        ]
    }
}

我制作了一个小的javascript对象来处理你需要做的事情。需要做的是您需要对服务器进行ajax调用以获取数据。这样您就可以在制作数据源之前定义数据源中的列。

function DataProvider(url){
            this.url = url;
        }

        DataProvider.prototype = {
            url:null,
            data:null,
            ds:null,
            getData:function() {return this.data},
            initialize:function(){
                YAHOO.util.Connect.asyncRequest('GET', this.url, this);
            },
            success:function(response){
                var responseVal = YAHOO.lang.JSON.parse(response.responseText);
                var columnList = responseVal.resultSet.columnList;
                this.data = responseVal.resultSet.results;
                this.ds = new YAHOO.util.FunctionDataSource(function(){return this.dataProvider.getData()});
                this.ds.responseSchema = {
                    resultsList:"resultSet.results",
                    fields:columnList
                }
                this.ds.dataProvider = this;
                /* make call to initialize your table using the data set */
                var myDataTable = new YAHOO.widget.DataTable("basic", columnList, this.ds, {caption:"DataTable Caption"});

                //console.debug(columnList);
                //console.debug(this.data);
            }
        }

因此，当页面加载时，请执行以下操作

function init(){
    var dataProvider = new DataProvider('testjson.json');
    dataProvider.initialize();
}

你的HTML应该是这样的

<body onload="init()" class="yui-skin-sam">
    <div id="basic"></div>
</body>

您应该包含以下脚本

<!-- css -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/datatable/assets/skins/sam/datatable.css">
    <!-- js -->
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/connection/connection-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/datatable/datatable-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/json/json-min.js"></script>

这应该有效，在IE和Firefox中都适合我。

YUI数据表：自定义列定义和数据

1 个答案: