6.5. DataTable

DataTable的引入

<!—需要的CSS -->

build/datatable/assets/datatable.css

build/yahoo-dom-event/yahoo-dom-event.js

build/connection/connection-min.js

<!—可選項，用到調整列寬時需要 -->

build/dragdrop/dragdrop-min.js

build/datasource/datasource-beta-min.js

build/datatable/datatable-beta-min.js

DataTable的使用

1. 定義表頭

var myColumnHeaders = [

{key:"name", text:"姓名"},

{key:"stdno", text:"學號"},

{key:"age", text:"年齡", type:"number"}

];

YAHOO.widget.ColumnSet的屬性說明

屬性名稱	含義
key	列的屬性名
text	列的顯示名稱
type	列的類型，包括"string", "number", "date", "currency", "checkbox", "select", "email", "link"，缺省爲”string”
resizeable	Boolean值，是否可通過拖動改變列寬度
sortable	Boolean值，是否可排序
abbr
children	定義子表頭，類型爲YAHOO.widget.ColumnSet
width	列寬度，單位爲px
className	定義本列單元格的樣式名稱
formatter	定義本列單元格的格式化函數 function(elCell, oRecord, oColumn, oData)
parse
editor	定義可編輯的列，可用的值爲”textbox”，”textarea”
descFunction	遞減排序的函數function(a,b)
ascFunction	遞增排序的函數function(a,b)

2. 創建datatable

var myDataTable = new YAHOO.widget.DataTable(

"myContainer", //datatable綁定的頁面element(DIV)

myColumnSet, //表頭定義, YAHOO.widget.ColumnSet

myDataSource, //數據源

{caption:"My Caption",summary:"摘要"} //datatable的配置集

);

DataTable的配置集

屬性名稱	含義
caption	表格的表頭文字
summary	表格摘要
paginator	Boolean值，是否分頁，缺省爲false
paginatorOptions	{ containers: rowsPerPage: 每頁顯示的記錄數, pageLinks: 最多顯示的頁面鏈接數，0爲全部 currentPage:當前頁 dropdownOptions:下拉框選擇項，null表示不使用下拉框 }
initialRequest	XHR方式下，附加的請求參數
fixedWidth	固定表格寬度
scrollable	表格有滾動條，滾動時表格表頭保持不動，Boolean值
rowSingleSelect	只允許選擇一行，Boolean值
contextMenu	表格的上下文菜單，右鍵彈出，YAHOO.widget.ContextMenu
sortedBy	{colKey：排序的列, dir: 排序的方向，"desc"和"asc" }
pageCurrent	表格的當前頁

3. DataTable的數據源

DS_JSArray

以對象數組的方式使用，可以是在客戶端定義對象數組，也可以通過DWR的方式調用JAVA的方法獲取一個JAVA類的List列表，在回調函數中以數組方式使用。

var commonDataSource = new YAHOO.util.DataSource(data);

//data可以爲用javascript定義的對象數組，也可以是DWR方式下回調函數的參數

commonDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;

JSON

使用JSON對象時

var myDataSource = new YAHOO.util.DataSource("query.action");

myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;

myDataSource.responseSchema = {

resultsList: "result.data",// 結果集所在的JSON結構中的對象

fields: ["id","username","email","monicker","edit","del"]

};

XML

var myDataSource = new YAHOO.util.DataSource("query.action");

myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;

myDataSource.responseSchema = {

resultNode: "Item", // 結果集所在的XML結構中的結點

fields: ["Company","Title","Name","Phone","Email"] //表格的列

};

Plain Text Data

var myDataSource = new YAHOO.util.DataSource("query.action");

myDataSource.responseType = YAHOO.util.DataSource.TYPE_TEXT;

myDataSource.responseSchema = {

recordDelim: ""n", // 記錄的分割符

fieldDelim: ",", // 字段的分割符

fields: ["Company","Title","Name","Phone","Email"] //表格的列

};

4. DataTable數據的訪問

這裏主要指通過javascript訪問DataTable數據時採用的方式。

var rs = YAHOO.Claim.commonDataTable.getRecordSet();

var obj = rs.getRecord(i); //獲取第i行的數據對象

對象obj的屬性就是定義表頭時指定的各列的key值，可以通過obj[key值]訪問該行上的各列屬性值。

5. 測試

6.6. DragDrop

6.7. TreeView

6.8. Container

一組模擬windows控件的組件

Container下的控件繼承關係

Overlay

Module

ToolTip

Dialog

SimpleDialog

Panel

Container的引入

build/yahoo-dom-event/yahoo-dom-event.js

<!—可選項：如果不使用Dialog/SimpleDialog則不需要 -->

build/connection/connection-min.js

<!—可選項：使用動畫效果時用到 -->

build/animation/animation-min.js

build/container/container-min.js

6.8.1. Container下的控件

由於Container下的控件的創建方式和屬性控制方式基本相同，可以在創建組件時通過config對象指定控件的各項屬性，也可以在創建後通過myContainer.cfg.setAttribute來設置控件屬性，通過對這些屬性的控制來實現控件的不同動作表現。因此對於各個子控件的屬性在下面採用配置集的方式用一個表格來說明。

Module

一種最基礎的控件模塊，通過Module可以創建一個從HTML中繼承下來的javascript對象，你可以操作頁面中的module,也可以動態創建新的module。module是沒有預定義樣式的，必須手動定義。

使用Module必需的引入

build/yahoo-demo/yahoo-dom-event.js

build/container/container_core-min.js

初始化的方式：

constructor：YAHOO.widget.Module(ModuleId,{配置集});

moduleId如果頁面中已經定義了moduleId,則可以直接調用render函數將設置的各種屬性直接應用到module上，如果頁面中沒有定義這個id,則必須調用render(DOM中已經存在的element)將module插入到DOM中。

顯示/隱藏Module

方式一：

myModule.show();

myModule.hide();

方式二：

myModule.cfg.setProperty("visible", true);

myModule.cfg.setProperty("visible", false);

配置集的說明

屬性名稱	含義	備註
visible	Module是否可見，Boolean值
monitorresize	設置是否創建一個不可見的屏幕元素用來監聽DOM中文字大小的改變，Boolean值

6.8.2. Overlay

對Module的一種擴展，但和Module不同的是Overlay可以通過絕對方式定位，並且是浮動窗口，不會影響頁面中原有的內嵌標籤的佈局。與Module相同的是：也沒有預先定義樣式，必須手動設置。

初始化的方式

與Module相同

位置設定

1．絕對定位：

myOverlay.cfg.setProperty("x", 100);

myOverlay.cfg.setProperty("y", 200);

myOverlay.cfg.setProperty("xy", [100,200]);

2．居中

窗口中居中：myOverlay.center();

屏幕居中：myOverlay.cfg.setProperty("fixedcenter", true);

3．對齊

// myOverlay's右上角對齊myContextEl的左上角

myOverlay.cfg.setProperty("context", ["myContextEl", "tr", "tl"]);

設置過對齊方式後可以直接使用align來改變對齊方式

// myOverlay's 右上角對齊 "myContextEl"'s 左下角.

myOverlay.align("tr", "bl");

注：對齊方式的寫法: top->t ,left ->l, ,bottom->,right->r

top-left 就表示爲tl

配置集

屬性名稱	含義
x	設置元素的left屬性
y	設置元素的top屬性
xy	設置元素的top,left屬性
context	停靠位置，[element, Overlay的頂角, 被停靠的element頂角]
effect	當Overlay顯示或隱藏時的特效對象.
fixedcenter	窗口大小改變或滾屏時保持居中
width	設置元素的width
height	設置元素的height
zIndex	設置Overlay的遮蓋順序
constraintoviewport	設置爲true時保持在視窗邊界以內
iframe	設置爲true時在Overlay後將存在一個ifram,防止被Z序高的element覆蓋

已知的特效：

YAHOO.widget.ContainerEffect.SLIDE

YAHOO.widget.ContainerEffect.FADE 逐步變淡

OverlayManage

用於管理多個Overlay的組件，能夠模擬類似於多窗口管理系統的交互，使得各個Overlay之間的能夠正確的覆蓋、獲得焦點/失去焦點。

使用這一功能需要的代碼很簡單，只需要通過register方法登記所有需要納入窗口管理的Overlay就可以了。

//示例：

YAHOO.namespage(“demo”);

YAHOO.demo.manager = new YAHOO.widget.OverlayManager();

YAHOO.demo.manager.register( [Overlay的數組列表] );

6.8.3. Tooltip

對象定義：YAHOO.widget.Tooltip

從overlay上擴展出來的控件，小的浮動窗口，動態生成，提供了預定義的樣式。

Tooltip的引入

build/container/assets/container.css

build/yahoo-dom-event/yahoo-dom-event.js

<!—如果要改變頁面元素的屬性需要引入-->

build/animation/animation-min.js

build/container/container-min.js

Tooltip初始化方式

constructor：YAHOO.widget.Tooltip(tooltipId , { 配置集 } );

tooltipId可以是頁面中未聲明的控件。

Tooltip配置集

屬性名稱	含義
text	提示文字
context	鼠標停靠element ID
container	缺省爲document.body，指明容器元素
preventoverlap	缺省爲true,指明是否使用覆蓋方式
showdelay	顯示tooltip的延遲時間，單位毫秒
hidedelay	隱藏tooltip的延遲時間，單位毫秒
autodismissdelay	The number of milliseconds to wait before automatically dismissing a Tooltip after the mouse has been resting on the context element.

同時還繼承了Module,Overlay的所有屬性

6.8.4. Panel

從overlay擴展出來的一個組件，類似於操作系統的窗口。他不同於瀏覽器的彈出窗口，是內嵌在頁面文件中的一種動態Html的element。他在overlay的基礎上擴展了一些窗口的功能，如關閉、拖放等。Panel使用了預定義的樣式表

Panel的引入

build/container/assets/container.css

build/yahoo-dom-event/yahoo-dom-event.js

<!—可選項：如果用到動畫時需要引入 -->

build/animation/animation-min.js

<!—可選項：如果用到拖放時需要引入-->

build/dragdrop/dragdrop-min.js

build/container/container-min.js

Panel的初始化

constructor：

YAHOO.widget.Panel(panelId); //使用缺省配置選項

YAHOO.widget.Panel(panelId,{自定義的配置項}); //使用自定義的配置項

Panel的配置集

屬性名稱	含義
close	是否顯示關閉按鈕，true/false
draggable	是否可以拖動
underlay	陰影顯示方式 shadow,none,matte,缺省爲shadow，none爲無陰影，matte爲白色邊界
modal	Panel獲得焦點時，是否允許使用Panel以外的控件獲得焦點，類似於MFC的模態/無模態對話框
keylisteners	響應按鍵事件的監聽器列表

Panel同時還繼承了Module,Overlay的屬性

6.8.5. Dialog

從Panel上擴展出來的組件，類似於Windows的窗口，在瀏覽器中提供了一種不用頁面跳轉就能使用交互來獲取用戶輸入的交互方式，用戶輸入的數據都是通過一個標準的HTML Form獲取的，並支持多種的獲取輸入數據的方式：普通的Form的提交，XMLHttpRequest，或者完全通過腳本來讀取。

Dialog的引入

build/container/assets/container.css

build/yahoo-dom-event/yahoo-dom-event.js

<!—可選項: Animation (only required if enabling Animation) -->

build/animation/animation-min.js

<!—可選項: Drag & Drop (only required if enabling Drag & Drop) -->

build/dragdrop/dragdrop-min.js

build/connection/connection-min.js

build/container/container-min.js

Dialog的初始化

constructor：YAHOO.widget.Dialog(dialogId);

dialogId爲頁面中已經申明的element

Dialog的配置集

屬性名稱	含義
postmethod	窗口提交的方式，async：異步，form：標準的submit，none：不提交
buttons	dialog中的button數組列表，

同時繼承了Overlay，Panel的屬性

單個按鈕對象的定義方式：

{ text:按鈕上的文本,

handler:按鈕的click事件響應函數

isDefault:是否缺省按鈕},

6.8.6. SimpleDialog

從Dialog上擴展出來的一個組件,主要用於處理用戶選擇Yes/NO，OK/Cancel的交互

SimpleDialog的引入

build/container/assets/container.css

build/yahoo-dom-event/yahoo-dom-event.js

<!—可選項：用到動畫效果時使用 -->

build/animation/animation-min.js

<!—可選項：用到拖放功能時使用-->

build/dragdrop/dragdrop-min.js

<!—可選項：用到異步提交方式時使用) -->

build/connection/connection-min.js

build/container/container-min.js

SimpleDialog的初始化

constructor：YAHOO.widget.SimpleDialog(dialogId,{配置集});

dialogId爲頁面中已經申明的element

SimpleDialog的配置集

屬性名稱

含義

text

對話框中顯示的提示信息

icon

按鈕圖標：

ICON_BLOCK,

ICON_WARN,

ICON_HELP,

ICON_INFO,

ICON_ALARM,

ICON_TIP.

6.9. Grids

支持不規定寬度的設計

一組用於定義界面版式的樣式表(CSS文件)

6.10. TabView

用來創建導航tab欄組件

可以從HTML中的已經存在的標籤來創建，也可以完全通過javascript創建，該組件的最上層元素爲<div>，每一個tab頁面項使用<li>

TableView的引入

/build/tabview/assets/tabview.css

build/tabview/assets/border_tabs.css

build/yahoo-dom-event/yahoo-dom-event.js

build/element/element-beta-min.js

<!—可選項: 使用動態加載時使用-->

build/connection/connection-min.js

build/tabview/tabview-min.js

TableView的初始化

constructor：YAHOO.widget.TabView(tableViewId);

創建的方式：

1．頁面中存在id

<li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>

<li><a href="#tab2"><em>Tab Two Label</em></a></li>

<li><a href="#tab3"><em>Tab Three Label</em></a></li>

</ul>

<div><p>Tab One Content</p></div>

<div><p>Tab Two Content</p></div>

<div><p>Tab Three Content</p></div>

</div>

注：

yui-navset爲css文件中定義的TableView的樣式

yui-nav爲css文件中定義的Tab頁標籤的樣式

2．完全使用JavaScript創建TabView

var myTabs = new YAHOO.widget.TabView("demo");

myTabs.addTab( new YAHOO.widget.Tab({

label: 'Tab One Label',

content: '<p>Tab One Content</p>',

active: true

}));

myTabs.addTab( new YAHOO.widget.Tab({

label: 'Tab Two Label',

content: '<p>Tab Two Content</p>'

}));

myTabs.appendTo(document.body);

</script>

TableView的配置集

屬性名稱	含義
activeIndex	當前激活的Tab頁面編號，第一頁爲0
activeTab	YAHOO.widget.Tab，指向被激活的Tab頁，
element	被綁定的HTML元素
orientation	頁面標籤所在的位置，top，bottom，left，right 默認爲top
tabs	標籤頁(Tab)的數組列表，只讀

Tab的配置集

屬性名稱	含義
active	當前Tab頁面是否激活，Boolean值
cacheData	Tab頁加載數據的時候是否隱藏，只有dataSrc可用的時候有效
content	激活頁面的文字標籤
contentEl
dataLoaded	數據是否加載完成
dataSrc	如果設置了這一屬性，當Tab頁被激活時，頁面數據從這個URL處加載，需要用到Connection Manager
dataTimeout	Tab頁加載的超時時間，單位微秒，只有在設置了dataSrc纔有效
disabled	是否禁止激活本Tab頁，缺省爲false
label	Tab頁的標籤
labelEl	Tab頁的HTML容器元素
loadMethod	數據請求的方式，缺省爲GET，只有在設置了dataSrc纔有效

TabView用到的CSS定義

Class	描述
yui-navset	TabView的<div>
yui-nav	TabView的<ul>
yui-content	TabView的<div>的下一級<div>
disabled	Tab頁面不可用時的樣式，應用在<ul>上
selected	Tab頁面激活時的樣式，應用在<ul>上
loading	Tab頁面加載時的樣式，TabView的<div>的下一級<div>的樣式

7. 常見問題

7.1. YUI提供的javascript的文件引入

關於引入的版本：

YUI對於需要引入的js文件都提供了多個版本：

1 min是去掉空格後的版本，在正式項目中建議使用min版。

2 debug是調試的版本，主要結合YUI的log組件使用。

3 beta版

4 不帶後綴的爲便於閱讀的版本

yahoo-dom-event.js是包含了yahoo.js，dom.js，event.js的內容，使用了前者後就無需再引入後面三個文件。

關於引入的順序：

1．大部分組件都是依賴於事件驅動，並通過YUI提供的工具集進行DOM操作的，因此yahoo.js，dom.js，event.js或者這三個文件的合成文件yahoo-dom-event.js必須早於其他YUI的js文件引入

2．Autocomplete如果需要從服務器取數據時，要用到YUI提供的datasource.js，因此datasource.js必須在autocomplete.js之前引入；如果是以XHR（JSON，XML等）的方式取數，還要用到YUI提供的connection，因此connection.js也必須在autocomplete.js之前引入；如果用到了動畫方式展開下拉框，則需要保證animation.js在autocomplete.js之前引入。

3．Datatable中列寬度的調整，Container組件中的Overlay以及從Overlay繼承下來的Dialog，SimpleDialog的窗口拖動，需要用到dragdrop.js，因此dragdrop.js必須在datatable.js和container.js之前引入；如果要用到Dialog的動畫顯示效果，則需要先引入animation.js。

YAHOO工具庫(二)

6.5. DataTable

DataTable的引入

DataTable的使用

6.6. DragDrop

6.7. TreeView

6.8. Container

Container下的控件繼承關係

Container的引入

6.8.1. Container下的控件

Module

使用Module必需的引入

初始化的方式：

顯示/隱藏Module

配置集的說明

6.8.2. Overlay

初始化的方式

位置設定

配置集

OverlayManage

6.8.3. Tooltip

Tooltip的引入

Tooltip初始化方式

Tooltip配置集

6.8.4. Panel

Panel的引入

Panel的初始化

Panel的配置集

6.8.5. Dialog

Dialog的引入

Dialog的初始化

Dialog的配置集

6.8.6. SimpleDialog

SimpleDialog的引入

SimpleDialog的初始化

SimpleDialog的配置集

6.9. Grids

6.10. TabView

TableView的引入

TableView的初始化

TableView的配置集

Tab的配置集

TabView用到的CSS定義

7. 常見問題

7.1. YUI提供的javascript的文件引入

關於引入的版本：

關於引入的順序：