惠普内部员工easyui培训文档.docx
- 文档编号:10066135
- 上传时间:2023-05-23
- 格式:DOCX
- 页数:49
- 大小:210.17KB
惠普内部员工easyui培训文档.docx
《惠普内部员工easyui培训文档.docx》由会员分享,可在线阅读,更多相关《惠普内部员工easyui培训文档.docx(49页珍藏版)》请在冰点文库上搜索。
惠普内部员工easyui培训文档
目录
1Panel(面板)及validatebox(验证框)3
1.1实例3
2Accordion(可折叠标签)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
1
Panel(面板)及validatebox(验证框)
1.1实例
1.1.1代码
15px50px;height: 180px;">用户名: 密码:
1.1.2效果图
2Accordion(可折叠标签)
2.1实例
2.1.1代码
'east',iconCls: 'icon-reload',title: '中腾信金融服务公司员工结构图',split: true"style="width: 250px;"> 300px;height: 500px;"> auto;padding: 10px;"> #0099FF;">accordiondemo Accordion
10px;"> Accordion
2.1.2效果图
2.2参数
2.2.1容器参数
参数名称
参数类型
描述
默认值
width
数字
可折叠标签的宽度。
auto
height
数字
可折叠标签的高度。
auto
fit
布尔
是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。
false
border
布尔
是否显示边界线。
true
2.2.2面板参数
可折叠标签面板继承自面板(panel),许多属性定义在
标签里,下面的属性就是如此:参数名称
参数类型
描述
默认值
selected
布尔
设置可折叠标签中默认展开的标签页
false
2.3折叠方法collapse
$('#cc').layout('collapse','east');
3DateBox(日期框)
a)实例
i.代码
$(function(){
$('#dd').datebox({
currentText:
'今天',
closeText:
'关闭',
disabled:
false,
required:
true,
missingMessage:
'必填',
formatter:
formatDate
});
});
DateBox
10px;"> disable(); >disable enable(); >enable
ii.效果图
b)参数
属性名
类型
描述
默认值
currentText
字符串
为当前日期按钮显示的文本
Today
closeText
字符串
关闭按钮显示的文本
Close
disabled
布尔
如果为true则禁用输入框
false
required
布尔
定义输入框是否为必添
false
missingMessage
字符串
当输入框为空时提示的文本
必填
formatter
function
格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串
——
parser
function
分析字符串的函数,这个函数以’date’为参数并返回一个日期
——
c)事件
事件名
参数
描述
onSelect
date
当选择一个日期时触发
d)方法
方法名
参数
描述
destroy
none
销毁组件
disable
none
禁用输入框.
enable
none
启用输入框
4ComboBox(下拉框表框)
a)实例
i.代码
150px;" data-options="multiple: true,valueField: 'id',textField: 'name',data: [{'id': 1,'name': '集团'},{'id': 2,'name': '硬件部'},{'id': 3,'name': '软件部'}]"/>
ii.效果图
b)参数
属性名
类型
描述
默认值
width
数字
组件的宽度
auto
listWidth
数字
下拉列表的宽度
null
listHeight
数字
下拉列表的高度
null
valueField
字符串
基础数据值名称绑定到这个组合框
value
textField
字符串
基础数据的字段的名称绑定到这个组合框
text
editable
布尔
定义是否可以直接到文本域中键入文本
true
url
字符串
加载列表数据的远程URL
null
c)事件
事件名
参数
描述
onLoadSuccess
none
当远程数据成功加载时触发
onLoadError
none
当远程数据加载失败时触发
onSelect
record
当用户选择了一个列表项时触发
onChange
newValue,oldValue
当文本域字段的值改变时触发
d)方法
方法名
参数
描述
select
value
选择下拉列表中的一项
setValue
param
设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。
getValue
none
获取字段值
reload
url
请求远程列表数据.
5Dialog(对话框)
a)实例
i.代码
$(function(){
$('#dd').dialog({
title:
'对话框',
collapsible:
true,
minimizable:
true,
maximizable:
true,
resizable:
true,
toolbar:
[{
text:
'Add',
iconCls:
'icon-add',
handler:
function(){
alert('add');
}
},'-',{
text:
'Save',
iconCls:
'icon-save',
handler:
function(){
alert('save');
}
}],
buttons:
[{
text:
'Ok',
iconCls:
'icon-ok',
handler:
function(){
alert('ok');
}
},{
text:
'Cancel',
handler:
function(){
$('#dd').dialog('close');
}
}]
});
});
functionopen1(){
$('#dd').dialog('open');
}
functionclose1(){
$('#dd').dialog('close');
}
Dialog
10px;">