收藏

下载资源 加入VIP,免费下载

惠普内部员工easyui培训文档.docx

上传人：b****8 文档编号：10066135 上传时间：2023-05-23 格式：DOCX 页数：49 大小：210.17KB

下载 相关 举报

第1页 / 共49页

第2页 / 共49页

第3页 / 共49页

第4页 / 共49页

第5页 / 共49页

第6页 / 共49页

第7页 / 共49页

第8页 / 共49页

第9页 / 共49页

第10页 / 共49页

第11页 / 共49页

第12页 / 共49页

第13页 / 共49页

第14页 / 共49页

第15页 / 共49页

第16页 / 共49页

第17页 / 共49页

第18页 / 共49页

第19页 / 共49页

第20页 / 共49页

亲，该文档总共49页，到这儿已超出免费预览范围，如果喜欢就下载吧！

下载资源

资源描述

惠普内部员工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）,许多属性定义在

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.代码

Dialog

10px;">open1

close1

style="padding:

5px;width:

400px;height:

200px;">

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

dialogcontent.

ii.效果图

b）参数

属性名

类型

描述

默认值

title

字符串

对话框的标题文本

NewDialog

collapsible

布尔

定义是否显示可折叠按钮

false

minimizable

布尔

定义是否显示最小化按钮

false

maximizable

布尔

定义是否显示最大化按钮

false

resizable

布尔

定义对话框是否可编辑大小

false

toolbar

数组

对话框上的工具条，每个工具条包括:

text,

iconCls,

disabled,

handler

etc.

null

buttons

数组

对话框底部的按钮，每个按钮包括:

text,

iconCls,

handler

etc.

null

c）事件

Dialog的事件和窗口（Window）的事件相同。

d）方法

Dialog的函数方法和窗口（Window）的相同。

6Messager（提示框）

a）实例

i.代码

7

8parent.$.messager.show（{

9title:

"中腾信内部员工培训",

10msg:

'Easyui培训演示demo',

11timeout:

30000

12}）

效果图

a）方法

方法名

参数

描述

$.messager.show

options

在屏幕的右下角显示一个消息窗口。

这些选项的参数可以是一下的一个配置对象：

showType：

定义如何将显示消息窗口。

可用的值是：

null,slide,fade,show。

默认值是slide。

showSpeed：

定义消息窗口完成的时间（以毫秒为单位），默认值600。

width：

定义消息窗口的宽度。

默认值250。

height：

定义消息窗口的高度。

默认值100。

msg：

定义显示的消息文本。

title：

定义显示在标题面板显示的标题文本。

timeout：

如果定义为0，消息窗口将不会关闭，除非用户关闭它。

如果定义为非0值，当超时后消息窗口将自动关闭。

$.messager.alert

title,msg,icon,fn

显示一个警告窗口。

参数如下：

title：

显示在标题面板的标题文本。

msg：

提示框显示的消息文本。

icon：

提示框显示的图标。

可用的值是：

error,question,info,warning.

fn：

当窗口关闭时触发的回调函数。

$.messager.confirm

title,msg,fn

显示一个含有确定和取消按钮的确认消息窗口。

参数如下：

title：

显示在标题面板的标题文本。

msg：

确认消息窗口显示的消息文本。

fn（b）：

当用户点击按钮后触发的回调函数，如果点击OK则给回调函数传true,如果点击cancel则传false。

$.messager.prompt

title,msg,fn

显示一个确定和取消按钮的信息提示窗口，提示用户输入一些文本。

参数如下：

title：

显示在标题面板的标题文本。

msg：

提示窗口显示的消息文本。

fn（val）：

用户点击按钮后的回调函，参数是用户输入的内容。

b）扩展

可以通过$.messager.defaults方法自定义alert框的ok按钮和cancel按钮上显示的文字。

名字

类型

描述

默认值

ok

字符串

Ok

按钮上的文本

Ok

cancel

字符串

Cancel

按钮上的文本

Cancel

7NumberBox（数字框）

a）实例

i.代码

NumberBox

TheBoxcanonlyinputnumber.

10px;">disable

enable

ii.效果图

b）参数

选项名

类型

描述

默认值

min

数字

文本框中可允许的最小值

null

max

数字

文本框中可允许的最大值

null

precision

数字

最高可精确到小数点后几位

0

8Pagination（分页）

a）实例

i.代码

functioninitGrid（）{

//动态处理是否检索数据

varpagination=false;

varurl="";

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）参数

属性名

类型

描述

默认值

total

数字

当分页建立时设置记录的总数量

1

pageSize

数字

每一页显示的数量

10

pageNumber

数字

当分页建立时，显示的页数

1

pageList

数组

用户可以修改每一页的大小，pageList属性定义了多少种大小可以改变.

[10,20,30,50]

loading

布尔

定义数据是否正在加载

false

buttons

数组

定义自定义按钮，每个按钮包含两个属性：

iconCls:

显示背景图像的CSS类

handler:

当一个按钮被点击时的处理函数

null

showPageList

布尔

定义是否显示页面列表

true

showRefresh

布尔

定义是否显示刷新按钮

true

beforePageText

字符串

在输入框组件前显示的标签

Page

afterPageText

字符串

在输入框组件后显示的标签

Of{pages}

displayMsg

字符串

显示一个页面的信息。

Displaying{from}{to}of{total}items

c）事件

事件名

参数

描述

onSelectPage

pageNumber,pageSize

当用户选择一个新页时触发，回调函数包含两个参数：

pageNumber:

新页面的页数pageSize:

新页面的大小

onBeforeRefresh

ageNumber,pageSize

刷新按钮被点击之前触发，如果返回false则取消刷新操作

onRefresh

ageNumber,pageSize

刷新以后触发

onChangePageSize

ageSize

改变页面大小时触发

9Window（窗口）

窗口的主要用法和面板（panel）用法差不多

a）实例

i.代码

100%;width:

100%;overflow:

hidden;border:

none;">

Window

style="width:

500px;h

• 登录
• 首页
• 资源分类
• 升级会员
• 通知公告
• 帮助中心