论坛首页 → AJAX版 → YUI →

Yahoo UI学习笔记（二）------ DataTable

浏览 4446 次
锁定老贴子 主题：Yahoo UI学习笔记（二）------ DataTable
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • kj2ff
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 13
  • 积分: 17
  • 来自: 北京
最后更新时间：2007-03-15
 

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

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

  1. <link type="text/css" rel="stylesheet" href="build/datatable/assets/datatable.css">   
  2.   
  3. <!—这个是依赖的 -->   
  4. <script type="text/javascript" src="build/yahoo-dom-event/yahoo-dom-event.js"></script>   
  5.   
  6. <!—连接用的，XHR异步的时候会用到 -->   
  7. <script type="text/javascript" src="build/connection/connection-min.js"></script>   
  8.   
  9. <!—resizeable表格列的时候会用到 -->   
  10. <script type="text/javascript" src="dragdrop/dragdrop-min.js"></script>   
  11.   
  12. <!—用JSON的时候就要靠它了-->   
  13. <script type="text/javascript" src="http://www.json.org/json.js"></script>   
  14.   
  15. <!-- Source file -->   
  16. <script type="text/javascript" src="build/datasource/datasource-beta-min.js"></script>   
  17. <script type="text/javascript" src="build/datatable/datatable-beta-min.js"></script>  

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

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

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

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

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

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

  1. var myColumnHeaders = [   
  2.     {key:"name", text:"Dog's Name" ,sortable:true, resizeable:true},   
  3.     {key:"breed", text:"Dog's Breed",sortable:true, resizeable:true},   
  4.     {key:"age", text:"Dog's Age (in Weeks)", type:"number", sortable:true, resizeable:true}   
  5.   ];   
  6.   
  7.   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 = [   
  2.    {name:"Ashley",breed:"German Shepherd",age:12},   
  3.    {name:"Dirty Harry",breed:"Norwich Terrier",age:5},   
  4.    {name:"Emma",breed:"Labrador Retriever",age:9},   
  5.    {name:"Oscar",breed:"Yorkshire Terrier",age:6},   
  6.    {name:"Riley",breed:"Golden Retriever",age:6},   
  7.    {name:"Shannon",breed:"Greyhound",age:12},   
  8.    {name:"Washington",breed:"English Bulldog",age:8},   
  9.    {name:"Zoe",breed:"Labrador Retriever",age:3}   
  10.    ];   
  11.   var myDataSource = new YAHOO.util.DataSource(myDataSources);   
  12.   myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;   
  13.   myDataSource.responseSchema = {   
  14.     fields: ["name","breed","age"]   
  15.   };  

实际上自己先想一想，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    
  2. Type is a JavaScript Array. //JS数组，就是我们用的   
  3. Default Value: 0    
  4. ________________________________________   
  5. TYPE_JSFUNCTIOn - final Number    
  6. Type is a JavaScript Function. //JS函数返回   
  7. Default Value: 1    
  8. ________________________________________   
  9. TYPE_JSON - final Number    
  10. Type is JSON. //JSON，嘿嘿，服务器端数据有着落了   
  11. Default Value: 3    
  12. ________________________________________   
  13. TYPE_TEXT - final Number    
  14. Type is plain text. //纯文本？不知道这个文本怎么写？   
  15. Default Value: 5    
  16. ________________________________________   
  17. TYPE_UNKNOWN - final Number    
  18. Type is unknown. //默认的   
  19. Default Value: -1    
  20. ________________________________________   
  21. TYPE_XHR - final Number    
  22. Type is hosted on a server via an XHR connection. //异步连接   
  23. Default Value: 2    
  24. ________________________________________   
  25. TYPE_XML - final Number    
  26. Type is XML. //XML，呵呵，这个也不错。   
  27. 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还有复合表头和时间表格，大家有时间自己看看，时间关系我不多写了，以后找时间补上。
返回顶楼
   
论坛首页 → AJAX版 → YUI

跳转论坛:
JavaEye推荐