YUI学习笔记（二）------ DataTable

先打开 http://developer.yahoo .com/yui /datatable/ 因为Yahoo 提供的帮助很重要，再打开下载包里面的example看看，我基本上都是这个学习路线的。

看看了demo，感觉和日历控件差不多，上来还是三大块吧。
第一块：

1. • <link type= "text/css"  rel= "stylesheet"  href= "build/datatable/assets/datatable.css" >   
   •   
   • <!—这个是依赖的 -->   
   • <script type= "text/javascript"  src= "build/yahoo -dom-event/yahoo -dom-event.js" ></script>   
   •   
   • <!—连接用的，XHR异步的时候会用到 -->   
   • <script type= "text/javascript"  src= "build/connection/connection-min.js" ></script>   
   •   
   • <!—resizeable表格列的时候会用到 -->   
   • <script type= "text/javascript"  src= "dragdrop/dragdrop-min.js" ></script>   
   •   
   • <!—用JSON的时候就要靠它了-->   
   • <script type= "text/javascript"  src= "http://www.json.org/json.js" ></script>   
   •   
   • <!-- Source file -->   
   • <script type= "text/javascript"  src= "build/datasource/datasource-beta-min.js" ></script>   
   • <script type= "text/javascript"  src= "build/datatable/datatable-beta-min.js" ></script>  

基本上每个控件应该插入哪些js文件，在yahoo 网站上都说了，大家自己找找。

第二块：先来看看dataTable的构造函数（用Java术语习惯了，大家凑合听吧）查了查API，发现这么写着：

1. • Constructor   
   • DataTable ( elContainer , oColumnSet , oDataSource , oConfigs )    
   • Parameters:    
   • elContainer <HTMLElement> Container element  for  the TABLE   
   • //不用说了，装table的容器，说白了就是网页上div的id属性    
   • oColumnSet <YAHOO .widget.ColumnSet> ColumnSet instance.    
   • //列集的实例，下面详细说   
   • oDataSource <YAHOO .util.DataSource> DataSource instance.    
   • //数据源的实例，后面会提到   
   • oConfigs <object> (optional) Object literal of configuration values.    
   • //DataTable配置   

我们可以直接new一个空的DataTable对象：

1. • var  myDataTable =  new  YAHOO .widget.DataTable( "myContainer3" );  

然后在网页中插入一个id为myContainer3的div，只不过我们什么都看不到。
既然叫DataTable，那就一定要有数据了，不然就没啥用处了，我们先不考虑从服务器端获取数据，先来简单的直接在客户端拿数据试试。现在我们来看看第二个参数columnSet,继续查看API，我们知道了YAHOO .widget.ColumnSet需要一个集合，实际它表示的就是表头的意思。那我们可以这么写:

1. • var  myColumnHeaders = [   
   •     {key: "name" , text: "Dog's Name"  ,sortable: true , resizeable: true },   
   •     {key: "breed" , text: "Dog's Breed" ,sortable: true , resizeable: true },   
   •     {key: "age" , text: "Dog's Age (in Weeks)" , type: "number" , sortable: true , resizeable: true }   
   •   ];   
   •   
   •    var  myColumnSet =  new  YAHOO .widget.ColumnSet(myColumnHeaders);  

先定义一个myColumnHeaders，里面放者表格需要的表头信息，key属性对应DataSource的属 性，text是显示在网页上的表头名称，sortable和resizeable可以设置表格是否排序的功能。然后把myColumnHeaders给 ColumnSet对象了。

这个时候我们再定义一个DataTable:

1. • var  myDataTable =  new  YAHOO .widget.DataTable( "myContainer2" , myColumnSet);  

别忘了插入一个myContainer2的div，刷新页面看看，是不是表格已经出来了，只不过只有表头信息，还会显示No records found.因为我们还没有数据呢。

第三个参数肯定是给数据的了，查查DataSource的API感觉不是很简单，先可我用的来吧。贴段代码一起来理解：

1. • var  myDataSources = [   
   •    {name: "Ashley" ,breed: "German Shepherd" ,age:12},   
   •    {name: "Dirty Harry" ,breed: "Norwich Terrier" ,age:5},   
   •    {name: "Emma" ,breed: "Labrador Retriever" ,age:9},   
   •    {name: "Oscar" ,breed: "Yorkshire Terrier" ,age:6},   
   •    {name: "Riley" ,breed: "Golden Retriever" ,age:6},   
   •    {name: "Shannon" ,breed: "Greyhound" ,age:12},   
   •    {name: "Washington" ,breed: "English Bulldog" ,age:8},   
   •    {name: "Zoe" ,breed: "Labrador Retriever" ,age:3}   
   •    ];   
   •    var  myDataSource =  new  YAHOO .util.DataSource(myDataSources);   
   •   myDataSource.responseType = YAHOO .util.DataSource.TYPE_JSARRAY;   
   •   myDataSource.responseSchema = {   
   •     fields: [ "name" , "breed" , "age" ]   
   •   };  

实际上自己先想一想，JS获取数据的方式基本就两种，一种从服务器端拿，一种是自己在JS定义好了拿（估计没人会这么 干）。从服务器拿又多种情况了，具体我就不说了。代码中的myDataSources是一个JS的Array，这里用的name、breed、age就是 上面ColumnSet里面定义的key值，我们填充好数据后，还要对DataSource做些设置。
首先new一个DataSource把myDataSources注入进去，然后设置myDataSource.responseType设置为TYPE_JSARRAY，这里大家最好借助API来理解，Yahoo UI的DataSource来源于以下：

1. • TYPE_JSARRAY -  final  Number    
   • Type is a JavaScript Array.  //JS数组，就是我们用的   
   • Default Value:  0     
   • ________________________________________   
   • TYPE_JSFUNCTIOn -  final  Number    
   • Type is a JavaScript Function.  //JS函数返回   
   • Default Value:  1     
   • ________________________________________   
   • TYPE_JSON -  final  Number    
   • Type is JSON.  //JSON，嘿嘿，服务器端数据有着落了   
   • Default Value:  3     
   • ________________________________________   
   • TYPE_TEXT -  final  Number    
   • Type is plain text.  //纯文本？不知道这个文本怎么写？   
   • Default Value:  5     
   • ________________________________________   
   • TYPE_UNKNOWN -  final  Number    
   • Type is unknown.  //默认的   
   • Default Value: - 1     
   • ________________________________________   
   • TYPE_XHR -  final  Number    
   • Type is hosted on a server via an XHR connection.  //异步连接   
   • Default Value:  2     
   • ________________________________________   
   • TYPE_XML -  final  Number    
   • Type is XML.  //XML，呵呵，这个也不错。   
   • Default Value:  4   

最后一句responseSchema就是指定响应的schema了，对应表格的列。

我们建立一个完全的表格看看了：

1. • var  myDataTable =  new  YAHOO .widget.DataTable( "myContainer" ,myColumnSet,myDataSource,{caption: "My Caption" ,summary: "My Summary" });  

 4个参数全给了，前3个我们都说，最后一个参数看起来也很容易理解，一个指定标题，一个指定摘要。把myContainer DIV加到body当中，刷新看看吧，怎么样，表格出来了吧，还可以排序呢。

对于DataTable还有复合表头和时间表格，大家有时间自己看看，时间关系我不多写了，以后找时间补上。