yui 之 DataSource
细细体会，DataSource会带给你许多好处，一系列标准的接口和方法，使你可以用不变应万变。还是用例子来说明吧：[code]{"ResultSet":{
"totalResultsAvailable":665,
"totalResultsReturned":10,
"firstResultPosition":1,
"ResultSetMapUrl":"http:\/\/local.yahoo.com\/mapview?stx=pizza&csz=Sunnyvale%2C+CA+94089&city=Sunnyvale&state=CA&radius=15&ed=9brhZa131DwigChqKlCo22kM1H_9WgoouCr87Ao-",
"Result":[{
"Title":"Pizza Depot",
"Address":"919 E Duane Ave",
"City":"Sunnyvale",
"State":"CA",
"Phone":"(408) 245-7760",
"Latitude":"37.388537",
"Longitude":"-122.003972",
"Rating":{
"AverageRating":"3.5",
"TotalRatings":"5",
"TotalReviews":"5",
"LastReviewDate":"1161495667"},
"Distance":"0.93",
"Url":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--",
"ClickUrl":"http:\/\/local.yahoo.com\/details?id=21332021&stx=pizza&csz=Sunnyvale+CA&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--",
"MapUrl":"http:\/\/maps.yahoo.com\/maps_result?name=Pizza+Depot&desc=4082457760&csz=Sunnyvale+CA&qty=9&cs=9&ed=6tiAL6160Sx1XVIEu1zIWPu6fD8rJDV4.offJLNUTb1Ri2Q.R5oLTYvDCz8YmzivI7Bz0gfrpw--&gid1=21332021",
"BusinessUrl":"http:\/\/pizza-depot.com\/",
"BusinessClickUrl":"http:\/\/pizza-depot.com\/"},
...
]}
}
[/code]上面的代码是什么格式？json。下面是用来包裹这个数据的DataSource。[code]YAHOO.util.Event.addListener(window, "load", function() {
YAHOO.example.XHR_JSON = new function() {
this.formatUrl = function(elCell, oRecord, oColumn, sData) {
elCell.innerHTML = "<a href='" + oRecord.getData("ClickUrl") + "' target='_blank'>" + sData + "</a>";
};
var myColumnDefs = [
{key:"Title", label:"Name", sortable:true, formatter:this.formatUrl},
{key:"Phone"},
{key:"City"},
{key:"Rating.AverageRating", label:"Rating", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true}
];
this.myDataSource = new YAHOO.util.DataSource("assets/php/ylocal_proxy.php?");
this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
this.myDataSource.connXhrMode = "queueRequests";
this.myDataSource.responseSchema = {
resultsList: "ResultSet.Result",
fields: ["Title","Phone","City",{key:"Rating.AverageRating",parser:YAHOO.util.DataSource.parseNumber},"ClickUrl"]
};
this.myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs,
this.myDataSource, {initialRequest:"query=pizza&zip=94089&results=10&output=json"});
var callback1 = {
success : this.myDataTable.onDataReturnAppendRows,
failure : this.myDataTable.onDataReturnAppendRows,
scope : this.myDataTable
};
this.myDataSource.sendRequest("query=mexican&zip=94089&results=10&output=json",
callback1);
var callback2 = {
success : this.myDataTable.onDataReturnInsertRows,
failure : this.myDataTable.onDataReturnInsertRows,
scope : this.myDataTable
};
this.myDataSource.sendRequest("query=chinese&zip=94089&results=10&output=json",
callback2);
};
});
[/code] datasource对于服务器来的数据可以进行自定义的parser，这个功能非常的实用。[code]fields: ["name", "breed", {key: "age", parser: YAHOO.util.DataSource.parseNumber}][/code]上面的代码中，对于服务器过来的age字段，进行parser，变成数字。
其实datasource的职能到这一步应该是到头了，接下来对于数据的使用时另一层面的问题了。比如：对于datatable来说，从datasource获取数据之后，这个数据就复制到recordset里面去了。在datatable上面的操作，可以通过datatable的界面来进行了。比如：获取用户所点击的row的数据时，是通过recordset。 事件处理。
myDataTable.subscribe("rowSelectEvent", myHandler);
其中rowSelectEvent是事件。
onEventSelectRow是内置的处理rowSelectEvent事件的handler。
那么点击一条记录的时候，发生的事件是怎样的呢？
rowClickEvent --handler--》onEventSelectRow（onEventSelectRow ( oArgs.event , oArgs.target ) ）两个参数都是
oArgs.event <HTMLEvent> The event object.
oArgs.target <HTMLElement> The TR element.
也就是说默认情况下，通过设置myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow); 就可以达到我们常见的情景，对应的row变成深色。
如果同时订阅了rowSelectEvent事件，那么myhandler就会获得oArgs.el , oArgs.record，也就是相当于获得底层datasource的记录。
页:
[1]