yui2 datatable转换至yui3 (3)

实际上到上文为止，我们已经得到一个可用的DataTable。用稍微调整过的两个例子：

dt_dynamicdata_clean.html

dt_formatting_source.html

均可得到正确结果。画面不再截图。

接下来当然是往前再迈进。开始吸收yui3的部分。即：将原有的datasource抛弃，吸纳yui3的datasource

作为数据处理层。

首先，要做这个事情的原因：

1.原有的yui2 datasource ，对json采用自行解析的方式，代码相当冗余。可控性差。

2.其次当然是connection 要转成io。【上篇文章已经这么做了】

3.最后一点，就是yui3的时代，能砍掉的yui2部分就砍（这个纯属个人乐趣）

仔细观察yui3 的datasource例子后，我们可以发现，实际上构造语句是相当接近的。

而datatable，我只用到datasource-io的部分。因此一些调用代码的对应转换如下：

旧：

/*myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; myDataSource.responseSchema = { resultsList: "records", fields: [ {key:"id", parser:"number"}, {key:"name"}, {key:"date", parser:stringToDate}, {key:"price",parser:"number"}, {key:"number",parser:"number"} ], metaFields: { totalRecords: "totalRecords" // Access to value in the server response } };*/

新：

从上面的比较来看，调用代码是相当类似。接下来就是不一样的地方了。对Schema的处理。

Schema处理，YUI3DS（DataSource，下文就简称DS）采用了不一样的编写策略。利用了Plugin方式。

看了这个Y.Plugin.DataSourceJSONSchema的应用模式后，对 YUI3的Plugin 应用场景有了明确的概念。

这个概念相当于AOP（面向方面）。在方法发生前，拦截，处理，再让事件响应代码来处理，先人一步，杀人于无形。

由于yui3中plug方法没有做检测（检查参数有效性），因此要小心如忘记use了对应的module，导致一个无效的参数传入，

系统又不报错，加上plugin的工作模式又是躲在后面偷偷干，所以容易困扰（我就遇到那么一桩）。

我们放大来看Y.Plugin.DataSourceJSONSchema的工作流程。

datasource-io，request 发出去了

datasource-io，response返回了，走到success 的callback方法。

datasource-io，fire一个data事件！

DataSourceJSONSchema登场，拦截data事件响应代码【先于：_defDataFn执行】，解析了response.responseText，把值mix到事件对象中。然后再传递下去。

datasource，：_defDataFn开始执行，获得的事件对象已经包含了已解析后的数据。

如果把上述流程的蓝色字体部分抽走，代码会照常走下去，当然结果也是错误的，适时的时候无法取到期望中的数据。

总结一下。Plugin的适用场合，就是AOP。当需要对一个已成型的类，进行扩充性的数据处理时，或是在处理模式上有不同的分支时，可考虑采用Plugin来解决问题。

到这一步为止，DS是替换完毕了。但新的问题也接着来了。

YUI2 ，DataTable代码中，onDataReturnSetRows，onDataReturnUpdateRows等方法采用的接口是旧的。只有旧的DS才会按照这样的参数列表进行调用。此时要动用代码修改了。

原接口格式：

function(sRequest, oResponse, oPayload)

现接口格式（修改为：）

function(e)

上面三个形参，加上代码内文中的this，均可在e.callback/e 中找到。我是这样修改onDataReturnSetRows方法的：

onDataReturnSetRows : function(e) { var dt = e.callback.scope ; if((dt instanceof DT) && dt._sId) { var oRequest = e.request; var oResponse = e.response; var oPayload = e.callback.argument ; dt.fireEvent("dataReturnEvent", {request:oRequest,response:oResponse,payload:oPayload}); // Pass data through abstract method for any transformations var ok = dt.doBeforeLoadData(oRequest, oResponse, oPayload), pag = dt.get('paginator'), index = 0; // Data ok to set if(ok && oResponse && !oResponse.error && lang.isArray(oResponse.results)) { // Update Records if (dt.get('dynamicData')) { if (oPayload && oPayload.pagination && lang.isNumber(oPayload.pagination.recordOffset)) { index = oPayload.pagination.recordOffset; } else if (pag) { index = pag.getStartIndex(); } dt._oRecordSet.reset(); // Bug 2290604: dyanmic data shouldn't keep accumulating by default } dt._oRecordSet.setRecords(oResponse.results, index | 0); // Update state dt._handleDataReturnPayload(oRequest, oResponse, oPayload); // Update UI dt.render(); } // Error else if(ok && oResponse.error) { dt.showTableMessage(dt.get("MSG_ERROR"), DT.CLASS_ERROR); } } else { } },

这样修改后。

dt_dynamicdata_clean.html又可以工作了。

yui2 datatable转换至yui3 (3)相关推荐

yui2 datatable转换至yui3
网上有很多简便的方法,例如说直接include进来就用啊. 我还是坚持在compat的基础上融合进来:不过说到完美程度,是不及完整理解yui3的类库后再重写.但是第一目标:可用,第二目标:自己看着舒 ...
DataTable转换成IList
本文转载自http://blog.csdn.net/chentaihan/article/details/6407284 作者:陈太汉在用C#作开发的时候经常要把DataTable转换成IL ...
C#将DataTable转换成list的方法
本文实例讲述了C#将DataTable转换成list及数据分页的方法.分享给大家供大家参考.具体如下: /// <summary> /// 酒店评论列表-分页 /// </summa ...
badatatable转成json_C# DataTable 转换成JSON数据三种方法
在web开发中,我们可能会有这样的需求,为了便于前台的JS的处理,我们需要将查询出的数据源格式比如:List.DataTable转换为Json格式.特别在使用Extjs框架的时候,Ajax异步请求的数 ...
简单的反射把datatable 转换成list对象
/// <summary>/// 把datatable 转换成list对象/// </summary>/// <typeparam name="T"& ...
Datatable 转换 Dictionary
Datatable 转换 Dictionary DataTable dt = new DataTable();dt.Columns.Add("姓名");dt.Columns.Add ...
C# DataTable 转换成ListT
运用泛型和反射实现的转换,很给力.代码中掺杂详尽注释,稍微了解一下泛型和反射便可以了解转换的实质.可以直接复制粘贴进行调用哦. public class DtConverToList<T> ...
list lt t gt java_将DataTable转换成Listlt;Tgt;实现思路及示例代码
前几天在工作中,遇到一个问题:需要将查询出来的DataTable数据源,转换成List的泛型集合(已知T类型).第一反应,我想肯定要用到"泛型"(这不是废话吗?都说了要转换成Lis ...
C# DataTable转换成DataRow
linq中的cast<T>()及OfType<T>() DataTable dt=...........//获取从数据库中取出的数据(假设只有一条记录)//Cast<T& ...

yui2 datatable转换至yui3 (3)

yui2 datatable转换至yui3 (3)相关推荐

最新文章

热门文章