6.5. DataTable
DataTable的引入
<!—需要的CSS -->
build/datatable/assets/datatable.css
<!--必须的引入 -->
build/yahoo-dom-event/yahoo-dom-event.js
<!-- 可选项,用到XHR取数方式时需要 -->
build/connection/connection-min.js
<!—可选项,用到调整列宽时需要 -->
build/dragdrop/dragdrop-min.js
<!-- Source files -->
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的引入
<!-- Dependencies -->
build/yahoo-dom-event/yahoo-dom-event.js
<!—可选项:如果不使用Dialog/SimpleDialog则不需要 -->
build/connection/connection-min.js
<!—可选项:使用动画效果时用到 -->
build/animation/animation-min.js
<!-- Source file -->
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的引入
<!-- CSS -->
build/container/assets/container.css
<!-- Dependencies -->
build/yahoo-dom-event/yahoo-dom-event.js
<!—如果要改变页面元素的属性需要引入-->
build/animation/animation-min.js
<!-- Source file -->
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的引入
<!-- CSS -->
build/container/assets/container.css
<!-- Dependencies -->
build/yahoo-dom-event/yahoo-dom-event.js
<!—可选项:如果用到动画时需要引入 -->
build/animation/animation-min.js
<!—可选项:如果用到拖放时需要引入-->
build/dragdrop/dragdrop-min.js
<!-- Source file -->
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的引入
<!-- CSS -->
build/container/assets/container.css
<!-- Dependencies -->
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
<!--可选项: Connection (only required if performing asynchronous submission) -->
build/connection/connection-min.js
<!-- Source file -->
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的引入
<!-- CSS -->
build/container/assets/container.css
<!-- Dependencies -->
build/yahoo-dom-event/yahoo-dom-event.js
<!—可选项:用到动画效果时使用 -->
build/animation/animation-min.js
<!—可选项:用到拖放功能时使用-->
build/dragdrop/dragdrop-min.js
<!—可选项:用到异步提交方式时使用) -->
build/connection/connection-min.js
<!-- Source file -->
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的引入
<!-- Dependencies -->
<!-- core CSS -->
/build/tabview/assets/tabview.css
<!-- optional skin for border tabs -->
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
<!-- Source file -->
build/tabview/tabview-min.js
TableView的初始化
constructor:YAHOO.widget.TabView(tableViewId);
创建的方式:
1. 页面中存在id
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<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 class="yui-content">
<div><p>Tab One Content</p></div>
<div><p>Tab Two Content</p></div>
<div><p>Tab Three Content</p></div>
</div>
</div>
注:
yui-navset为css文件中定义的TableView的样式
yui-nav为css文件中定义的Tab页标签的样式
2. 完全使用JavaScript创建TabView
<script type="text/javascript">
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>的样式 |