惠普内部员工easyui培训文档 -
目录
1Panel（面板）及validatebox(验证框) (3)
1.1实例 (3)
2 Accordion（可折叠标签） (4)
2.1 实例 (4)
2.2参数 (4)
3DateBox（日期框） (5)
a)实例 (5)
b)参数 (6)
c)事件 (6)
d)方法 (6)
4ComboBox(下拉框表框) (6)
a)实例 (6)
b)参数 (7)
c)事件 (7)
d)方法 (8)
5Dialog（对话框） (8)
a)实例 (8)
b)参数 (10)
c)事件 (10)
d)方法 (10)
6Messager（提示框） (10)
a)实例 (10)
a)方法 (11)
b)扩展 (12)
7NumberBox（数字框） (12)
a)实例 (12)
b)参数 (12)
8Pagination（分页） (13)
a)实例 (13)
b)参数 (14)
c)事件 (14)
9Window（窗口） (15)
a)实例 (15)
b)参数 (17)
c)事件 (17)
d)方法 (17)
10Tabs（标签） (17)
a)实例 (17)
b)参数 (18)
c)事件 (18)
d)方法 (19)
e)标签面板属性 (19)
11Tree（树） (19)
a)实例 (19)
b)参数 (22)
c)事件 (22)
d)方法 (23)
12Layout（布局） (23)
a)实例 (23)
b)参数 (25)
c)方法 (25)
13Datagrid（数据表） (26)
a)实例 (26)
b)参数 (27)
c)Column参数 (28)
d)事件 (29)
e)方法 (30)
1Panel（面板）及validatebox(验证框)
1.1实例
1.1.1代码
1.1.2效果图
2 Accordion（可折叠标签）
2.1 实例
2.1.1 代码
Accordion
Accordion
2.1.2效果图
2.2参数
2.2.1容器参数
2.2.2面板参数
可折叠标签面板继承自面板（panel）,许多属性定义在
标签里，下面的属性就是如此：2.3折叠方法collapse
$('#cc').layout('collapse','east');
3DateBox（日期框）
a)实例
i.代码
$( function() {
$('#dd').datebox( {
currentText : '今天',
closeText : '关闭',
disabled : false,
required : true,
missingMessage : '必填',
formatter : formatDate
});
});
DateBox
ii.效果图
b)参数
c)事件
d)方法
4ComboBox(下拉框表框)
a)实例
i.代码
style="width:150px;"
data-options="multiple:true,valueField:'id',textField:'name',data:[{'id ':1,'name':'集团'},{'id':2,'name':'硬件部'},{'id':3,'name':'软件部'}]"/>
ii.效果图
b)参数
c)事件
d)方法
5Dialog（对话框）
a)实例
i.代码
Dialog
style="padding: 5px; width: 400px; height: 200px;">
dialog content.
dialog content.
dialog content.
dialog content.
dialog content.
dialog content.
dialog content.
dialog content.
ii.效果图
b)参数
c)事件
Dialog的事件和窗口(Window)的事件相同。
d)方法
Dialog的函数方法和窗口(Window)的相同。
6Messager（提示框）
a)实例
i.代码
7
8parent.$.messager.show({
9title:"中腾信内部员工培训",
10msg:'Easyui培训演示demo ',
11timeout:30000
12})
效果图
a)方法
b)扩展
可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。
7NumberBox（数字框）
a)实例
i.代码
NumberBox
The Box can only input number.
ii.效果图
b)参数
8Pagination（分页）
a)实例
i.代码
function initGrid(){
// 动态处理是否检索数据
var pagination = false;
var url = "";
if (isRetrieveData()==true){
pagination = true;
url = "../data/users.json";
}
// 创建grid
$('#grid').datagrid( {
iconCls : 'icon-forward',
fit : true,
border : false,
rownumbers : true,
striped : true,
pageList: [30,50,100],
pagination : pagination,
//singleSelect : true,
remoteSort:true,
toolbar : toolbar,
url : url,
idField : 'code',
frozenColumns : frozenColumns,
columns : columns,
onClickRow : onClickRow,
onDblClickRow : doDblClickRow });
}
ii.效果图
b)参数
c)事件
9Window（窗口）
窗口的主要用法和面板（panel）用法差不多
a)实例
i.代码
Window
style="width: 500px; height: 200px; padding: 5px; background:
#fafafa;">
style="padding: 10px; background: #fff; border: 1px solid #ccc;"> jQuery EasyUI framework help you build your web page easily.
click here to popup another
window.
style="text- align: right; height: 30px; line-height: 30px;"> onclick="resize()">Ok icon="icon-cancel"href="javascript:void(0)" onclick="resize()">Cancel
title="Test Window"style="width: 300px; height: 100px;">
ii.效果图
b)参数
大多数的属性和面板(panel)的属性是相同的，下面列出一些Window私有的属性：
c)事件
Window的事件和面板(panel)的事件相同
d)方法
除了”header”和”body”以外，Window的函数方法和面板(panel)的相同
10Tabs（标签）
a)实例
i.代码
11function doMenuClick(node) {
12if ($("#tree").tree("isLeaf", node.target) == false)
13return;
14
15var id = node.id;
16var text = node.text;
17if (!id) return;
18
19var elTab = parent.$('#mainTabs');
20if (elTab.tabs('exists', text)) {
21$('#cc').layout('collapse','east');
22elTab.tabs('select', text);
23} else {
24$('#cc').layout('collapse','east');
25var url = '../' + 'main'+ '/' + id + '.jsp';
26var content = ' style="width:100%;height:100%;overflow:hidden;">'+ 27'
29elTab.tabs('add', {
30title : text,
31content : content,
32// href: url,
33closable : true
34});
35}
36}
37});
i.效果图
b)参数
c)事件
d)方法
e)标签面板属性
11Tree（树）
a)实例
i.代码