YUI Datatable：自定义列定义和数据答案

【问题标题】：YUI Datatable: custom column definitions and dataYUI Datatable：自定义列定义和数据
【发布时间】：2010-11-20 14:14:32
【问题描述】：

我正在尝试使用 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
    };
}();


}

如果您对如何执行此操作而不是为什么我不应该提供任何意见，我们将不胜感激 ;-)

谢谢，

代码牛仔

【问题讨论】：

标签： datatable yui

【解决方案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 中都适用。

【讨论】：

感谢您的回复。需要明确的是，从我的 JSON 调用返回的数据是否包含这些元字段？
是的，在答案中，返回的 json 是从服务器返回的。这将允许您在从服务器返回的 json 请求中返回的元数据中定义列。
我得到 oFullResponse.response 未定义
如果你有时间，那将是传奇！这让我精神振奋 :-( 对我来说重要的一点是，在 JSON 数据返回之前，列名是未知的，我需要了解如何将我的“注释”添加为列下的字段。谢谢！
啊，我现在明白了...您根本不知道这些列，因此您无法在数据集中定义它们。让我考虑一下，我会更新我的答案。