YUI Datatable：自定义列定义和数据 [英] YUI Datatable: custom column definitions and data
问题描述
我试图使用YUI datatable来显示JSON对象的数据，如下所示：
I am trying to use the YUI datatable to display data from a JSON object which looks like this:
{"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（）中的数据源中定义列定义。
I can do this fine with the standard implementation. However, the column names (labels in above object) are dynamic so I will not know them until the data reaches the page. I therefore want to define the column definitions from the datasource which I am doing in doBeforeParseData().
从阅读/ IRC，有人建议我应该能够添加列到数据表。我希望表格如下所示：
From reading / IRC, it has been suggested that I should be able to add columns to the data table. I want the table to look like this:
列1列2 .......
Column 1 Column 2.......
注意.....
所以上述数据应该产生一行数据。这是我到目前为止：
so the above data should produce one row of data. Here's what I have so far:
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
};
}();
}
将感谢任何输入如何做，而不是为什么我不应该; - ）
Would be grateful for on any input on HOW to do this rather than why I shouldn't ;-)
谢谢，
codecowboy
codecowboy
推荐答案
我在这个午餐时间花了一点时间，但我有一些为你工作的东西。我看着你的JSON，并且你做的方式在数据表中不起作用。结果是一个列表，每个条目都是一行，每个属性都是一列。这是我想出的json，我希望为你工作。
I spent a bit of my lunch hour on this, but I got something working for you. I looked at your JSON and the way you did it would not work in the data table. results is a list, every entry is a row, and every attribute is a column. Here is the json that I came up with that I hope works for you.
{
"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调用到服务器。这样就可以在数据源制作之前定义数据源中的列。
I made a small javascript object for handling what you need to do. What needs to be done is you need to make an ajax call to the server for the data. This is so you can define the columns in the datasource before you MAKE the datasource.
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);
}
}
所以当页面加载完成以下
So when the page loads do the following
function init(){
var dataProvider = new DataProvider('testjson.json');
dataProvider.initialize();
}
你的html应该是这样的
And your html should look like this
<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中都适用于我。
That should work, works for me in both IE and firefox.
这篇关于YUI Datatable：自定义列定义和数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
