jQuery - EasyUI API 中文帮助手册1.24

jQuery EasyUI中文帮助手册

1.

2.

3.

4.

目录

jQuery EasyUI中文帮助手册 ..................................................................... 1 API版本：1.2.4 ........................................................... 错误！未定义书签。 基本.................................................................................................................. 4 1.1 语法解析 ...................................................................................................... 4

语法解析.......................................................................................................... 4 1.2 简单载入器 .................................................................................................. 4

简单载入器 ..................................................................................................... 4 1.3 一般拖动 ...................................................................................................... 6

可拖动 ............................................................................................................. 6 1.4 拖动至容器 .................................................................................................. 7

拖动至容器 ..................................................................................................... 7 1.5 缩放 .............................................................................................................. 8

缩放 ................................................................................................................. 8 1.6 分页 .............................................................................................................. 9

分页 ................................................................................................................. 9 1.7 搜索框 ........................................................................................................ 11

搜索框 ........................................................................................................... 11 1.8 进度条 ........................................................................................................ 13

进度条 ........................................................................................................... 13 布局管理器........................................................................................................... 14 2.1 控制面板 .................................................................................................... 14 2.2 选项卡 ........................................................................................................ 20

选项卡切换 ................................................................................................... 20 2.3 可伸缩面板 ................................................................................................ 24

可伸缩面板 ................................................................................................... 24 2.4 布局面板 .................................................................................................... 27

布局面板 ....................................................................................................... 27 菜单和按钮........................................................................................................... 30 3.1 菜单 ............................................................................................................ 30

菜单 ............................................................................................................... 30 3.2 链接按钮 .................................................................................................... 33

链接按钮 ....................................................................................................... 33 3.3 菜单按钮 .................................................................................................... 34

菜单按钮 ....................................................................................................... 34 3.4 分隔按钮 .................................................................................................... 35

分隔按钮 ....................................................................................................... 35 表单....................................................................................................................... 36 4.1 表单 ............................................................................................................ 36

表单 ............................................................................................................... 36 4.2 表单验证 .................................................................................................... 38

表单验证 ....................................................................................................... 38 4.3 自定义组合框 ............................................................................................ 40

自定义组合框 ............................................................................................... 40

可装载组合框 ............................................................................................ 42 可装载组合框 ............................................................................................... 42 4.5 组合树 ........................................................................................................ 45

组合树 ........................................................................................................... 45 4.6 组合表格 .................................................................................................... 46

组合表格 ....................................................................................................... 46 4.7 数字验证框 ................................................................................................ 48

数字验证框 ................................................................................................... 48 4.8 日期组合框 ................................................................................................ 49

日期组合框 ................................................................................................... 49 4.9 日期时间组合框 ........................................................................................ 51

日期时间组合框 ........................................................................................... 51 4.10 日历......................................................................................................... 53

日历 ............................................................................................................... 53 4.11 调节器..................................................................................................... 54

调节器 ........................................................................................................... 54 4.12 数字调节器............................................................................................. 56

数字调节器 ................................................................................................... 56 4.13 时间调节器............................................................................................. 57

时间调节器 ................................................................................................... 57

5. 窗口....................................................................................................................... 58

5.1 窗口 ............................................................................................................ 58

窗口 ............................................................................................................... 58 5.2 对话窗口 .................................................................................................... 60

对话窗口 ....................................................................................................... 60 5.3 消息窗口 .................................................................................................... 61

消息窗口 ....................................................................................................... 61

6. 数据表格和树形菜单........................................................................................... 63

6.1 数据表格 .................................................................................................... 63

数据表格 ....................................................................................................... 63 6.2 属性表格 .................................................................................................... 73

属性表格 ....................................................................................................... 73 6.3 树形菜单 .................................................................................................... 74

树形菜单 ....................................................................................................... 74 6.4 树形表格 .................................................................................................... 80

树形表格 ....................................................................................................... 80

4.4

1. 基本

1.1 语法解析 语法解析 使用方法

1. $.parser.parse(); // 解析所有的页面 2. $.parser.parse('#cc'); // 解析特定的代码 属性

名称 $.parser.auto 事件

名称 $.parser.onComplete 方法

名称 $.parser.parse 1.2 简单载入器 简单载入器 使用方法

1. easyloader.base = '../'; // 设置easyui根目录 2. easyloader.load('messager', function(){ // 载入特定模块 3. $.messager.alert('Title', 'load ok'); 4. }); 参数 context 描述 解析easyui组件。 参数 context 描述 当语法解析结束时触发事件。 类型 boolean（布尔型） 描述 定义是否自动解析easyui组件。 默认值 true 属性

名称 modules（模块） locales（多语言）

类型

描述

easyui根目录将会被

自动设置为相对于easyload.js的位置。 default

默认值

object（对象） 预定义模块。 object（预定义对象） string（字符串） string（字符串）

预定义多语言。 easyui根目录,必须以'/'结尾。 'themes'目录中的主题的名称。 定义是否在加载模块的同时加载css文件。 语言名称。 超时单位为毫秒，出现超时就触发。

base（很目录） theme（主题名称）

boolean（布

css（层叠样式表）

尔型） locale（自定义语言）

timeout（超时）

string（字符串） number（数字）

true

null

2000

预定义语言

? ? ? ? ?

de（德语） en（英语） fr（法语）

zh_CN（简体中文） zh_TW（繁体中文）

事件

名称 onProgress onLoad 方法 名称 load 参数 module, 描述 载入特定的模块。当载入成功时将调用回调函数。 参数 name name 描述 当一个模块成功载入时触发。 当一个模块及其所有依赖关系（可以理解为载入该模块所需要的其他模块、属性、方法等）载入时触发。

callback 有效的模块参数类型如下: 单一的模块名称 一个存储有模块名称的数组 一个以'.css'结尾的样式文件 一个以'.js'结尾的js文件 1.3 一般拖动 可拖动

使用$.fn.draggable.defaults重载默认值。 使用方法

1. 2. title 3. 1. $('#dd').draggable({ 2. handle:'#title' 3. }); 属性

名称

类型

描述

拖动时的替代元素，当被设置为'clone'时，将使用该元素的一个复制元素来作为替代元素。如果指定了一个函数, 它将返回一个jquery对象。

如果设置为true, 当拖动停止时元素将返回它的初始位置。

默认值

proxy（替代）

string,function null

revert（复原） cursor（指针）

boolean（布尔型）

false move null null null

string（字符串） 拖动时的CSS指针。

deltaX（水平被拖动元素对应于当前指针的水平number（数字）

增量，X轴） 位置。 deltaY（垂直增量，y轴） handle（句

number（数字） selector（选择

被拖动元素对应于当前指针的垂直

位置。

开始拖动的句柄。

柄） disabled（停止拖动） 器） boolean（布尔型） 当设置为true时停止拖动。 false 0 null edge（边缘） number（数字） 可以在其中拖动的容器的宽度 axis（拖动轴） 事件

名称 onBeforeDrag onStartDrag onDrag onStopDrag 方法 名称 options proxy enable disable 1.4 拖动至容器 拖动至容器

使用$.fn.droppable.defaults重载默认值。 使用方法

参数 none none none none 返回属性对象。 描述 参数 e e e e 描述 在拖动之前触发，返回false将取消拖动。 当目标对象开始被拖动时触发。 可用值为'v'或者'h',当设置为空时，string（字符串） 元素可以同时在水平和垂直方法拖动。 在拖动过程中触发，当不能再拖动时返回false。 当拖动停止时触发。 如果替代元素被设置，返回将被用于拖动的替代元素。 允许拖动。 禁止拖动。 1. 1. $('#dd').droppable({ 2. accept:'#d1,#d3' 3. }); 属性

名称 accept 事件

名称 类型 selector 描述 决定哪个可拖动元素将会被接收。 默认值 null 参数 e,source e,source e,source e,source 描述 当可拖动元素被拖入目标容器的时候触发，参数source是被拖动的DOM元素。 当可拖动元素被拖至某个元素之上的时候触发，参数source是被拖动的DOM元素。 当可拖动元素被拖离目标容器的时候触发，参数source是被拖动的DOM元素。 当可拖动元素被拖入目标容器并放置的时候触发，参数source是被拖动的DOM元素。 onDragEnter onDragOver onDragLeave onDrop 1.5 缩放 缩放

使用$.fn.resizable.defaults重载默认值。 使用方法

1. 1. $('#rr').resizable({ 2. maxWidth:800, 3. maxHeight:600 4. }); 属性

名称 disabled（禁止缩放）

类型 boolean（布尔型）

描述

如果设置为true将禁止缩放。

默认值 false

string（字符

handles（句柄）

串） minWidth（最小宽度）

number（数字）

说明缩放的方向，'n'表示向n, e, s, w, ne, 上（北）,'e'表示向右（东）se, sw, nw, 等。 all 缩放时所允许的最小宽度。

10

minHeight（最小高度） maxWidth（最大宽度） maxHeight edge（边界） 事件

名称 onStartResize onResize onStopResize 1.6 分页 分页

number（数字） number（数字） number（数字） number（数字） 缩放时所允许的最小高度。 缩放时所允许的最大宽度。 缩放时所允许的最大高度。 将被缩放的边框的边界。 10 10000 10000 5 参数 e e e 当开始缩放时触发。 描述 在缩放过程中触发，当返回false时, DOM元素将不再缩放。 当缩放停止是触发。 使用$.fn.pagination.defaults重载默认值。 依赖关系

?

链接按钮

使用指南

1. 1. $('#pp').pagination({ 2. total:2000, 3. pageSize:10 4. }); 属性

名称 类型 描述 默认值 total（总数） pageSize（每页记录数）

pageNumber（当前页码）

pageList（可选择的每页记录数） loading（是否正在载入）

number（数字） number（数字） number（数字） array（数组）

总记录数，当创建

1

分页时必须设置。 每页显示的记录数。

10

当分页创建完毕

1

时显示当前页码。

用户能够改变每

[10,20,30,50]

页显示的记录数。

false

boolean定义数据是否正

（布尔型） 在载入。

自定义按钮，每个

按钮包含2个属性:

iconCls：显示背景图片的CSS类 handler：当按钮被点击时调用的一个句柄函数

buttons（按钮）

array（数组）

null

定义是否显示可

showPageList（显示boolean

选择的每页记录

可选择的每页记录数） （布尔型）

数。 showRefresh（显示刷新）

beforePageText（输入框之前的文本） afterPageText（输入框之后的文本） displayMsg（显示信息） 事件

名称 参数 pageNumber, pageSize boolean定义是否显示刷（布尔型） 新按钮。 string（字符串） string（字符串） string（字符串）

在输入框之前显示的符号。 在输入框之后显示的符号。 在插件右上方显示分页信息。

true

true Page of {pages} Displaying {from} to {to} of {total} items

描述 当用户进行翻页时触发，回调函数包含2个参数: pageNumber：下一页的页码 pageSize：下一页的显示记录数 onSelectPage

onBeforeRefresh onRefresh onChangePageSize 方法 名称 options loading loaded 1.7 搜索框 搜索框

参数 none none none pageNumber, pageSize pageNumber, pageSize pageSize 刷新之前触发, 返回false将取消刷新。 刷新之后触发。 当用户修改每页显示记录数时触发。 描述 返回分页属性对象。 提醒分页插件正在载入。 提醒分页插件已经载入。 使用$.fn.searchbox.defaults重载默认值。

依赖关系

?

菜单按钮

使用方法 创建搜索框

1. 使用标签创建。对input标签引用'easyui-searchbox'类。 1. 6. 9. 10. All News 11. Sports News 12. 2. 使用脚本创建。

1. 2. 3. All News 4. Sports News 5. 6. $('#ss').searchbox({ 7. width:200, 8. searcher:function(value,name){ 9. alert(value + \ + name) 10. }, 11. menu:'#mm', 12. prompt:'Please Input Value' 13. }); 属性

名称 类型 描述 设置组建的宽度。 默认值 auto width（宽度） number（数字） propmt（提醒） value（值） string（字符串） string（字符串） 显示在搜索框的提醒信息。 '' 搜索框的默认值。 搜索类型下拉菜单。 '' null null menu（菜单） selector（选择器） searcher（搜索器） 方法

名称 options menu 参数 none none 描述 当用户点击搜索按钮或者function(value,name) 按下ENTER键的时候搜索函数将被调用。 返回搜索框属性对象。 返回搜索类型菜单对象。 textbox none 返回文本框对象。 返回当前搜索关键字。 getValue none setValue value 设置新的搜索关键字。 getName destroy resize 1.8 进度条 进度条

使用$.fn.progressbar.defaults重载默认值。

none none 返回当前搜索类型。 清除搜索框组件 width 重置搜索框组建的宽度。

依赖关系

?

无

使用方法 创建进度条

进度条组件可以通过html标签或脚本两种方法创建。使用html标签创建更容易，只需要对标签引用'easyui-progressbar'类。

1.

获取/设置进度值

为进度条获取当前进度值并且设置一个新的进度值。

1. var value = $('#p').progressbar('getValue'); 2. if (value < 100){ 3. value += Math.floor(Math.random() * 10); 4. $('#p').progressbar('setValue', value); 5. } 属性

名称 类型 描述 默认值 auto 0 width（宽度） string（字符串） 设置进度条的宽度。 value（值） text（文本） 事件

名称 参数 描述 number（数字） 当前进度，百分比数值。 string（字符串） 显示在组件中的文本模板。 {value}% onChange newValue,oldValue 当进度发生改变时触发。 方法

名称 options resize 参数 none 描述 返回进度条属性对象。 width 重置进度条。 返回当前进度值。 getValue none setValue value 设置一个新的进度值。 2. 布局管理器

2.1 控制面板

使用$.fn.panel.defaults重载默认值。

使用方法 创建控制面板

1. 使用标签创建控制面板

使用标签创建控制面板十分简单，只须要对标签引用'easyui-panel'类。 1. 4.

panel content.

5.

panel content.

6. 2. 使用脚本创建控制面板

下面的代码将创建一个工具栏在右上方的控制面板。 1. 2.

panel content.

3.

panel content.

4. 5. $('#p').panel({ 6. width:500, 7. height:150, 8. title: 'My Panel', 9. tools: [{ 10. iconCls:'icon-add', 11. handler:function(){alert('new')} 12. },{ 13. iconCls:'icon-save' 14. handler:function(){alert('save')} 15. }] 16. });

移动控制面板

调用'move'方法可以将控制面板移动到一个新的位置。 1. $('#p').panel('move',{ 2. left:100, 3. top:100 4. });

载入内容

下面的代码将使用ajax载入控制面板内容并且在载入成功时显示信息。 1. $('#p').panel({ 2. href:'content_url.php', 3. onLoad:function(){ 4. alert('loaded successfully'); 5. } 6. }); 属性

名称 类型 描述 显示在控制面板顶部的标题文本。 默认值 null stringtitle（标题） （字符串） iconCls（图标CSS类） width（宽度） height（高度） left（左边距） top（顶边距） string（字符串） 在控制面板标题前显示一个16x16大小图标的CSS类。 null number设置控制面板的宽度。 （数字） number设置控制面板的高度。 （数字） number设置控制面板的左边距。 （数字） number设置控制面板的顶边距。 （数字） string（字符串） string（字符串） string（字符串） 对控制面板引用一个CSS类。 auto auto null null cls（类） null headerCls（头部css类） bodyCls（主体类） style（样式） 对控制面板头部引用一个CSS类。 null 对控制面板主体引用一个CSS类。 null object给控制面板添加一个自定义的样式。 （对象） {} fit(铺满浏览器) boolean（布尔型） 设置为true时，控制面板的大小将铺满它所在的容器（浏览器）。 false booleanborder（边框） （布尔型） doSize（调整大小） noheader（无头部） content（内容） collapsible（可折叠） minimizable（最小化） maximizable（最大化） closable（关闭） tools（工具栏） collapsed（已折叠） minimized（已最小化） maximized（已最大化） boolean（布尔型） boolean（布尔型） string（字符串） boolean（布尔型） boolean（布尔型） boolean（布尔型） boolean（布尔型） 定义是否显示控制面板边框。 true 如果设置为true，在控制面板被创建时将被重置大小并且自动布局。 如果设置为true，控制面板头部将不被创建。 true false 控制面板主体的内容。 null 定义是否显示可折叠按钮。 false 定义是否显示最小化按钮。 false 定义是否显示最大化按钮。 false 定义是否显示关闭按钮。 false array自定义工具栏，每一个工具都可以包（数组） 含2个属性：图标类 和句柄。 boolean（布尔型） boolean（布尔型） boolean（布尔型） 定义控制面板初始化时是否折叠。 [] false 定义控制面板初始化时是否最小化。 false 定义控制面板初始化时是否最大化。 false closed（已关闭） boolean（布尔型） 定义控制面板初始化时是否关闭。 false stringhref（超链接） （字符串） booleancache（缓存） （布尔型） loadingMessage（载入时信息） string（字符串） 载入远程数据的超链接，载入的数据将显示在控制面板中。 如果设置为true，从超链接载入的数据将被缓存。 在正在载入远程数据时显示在控制面板中的信息。 null true Loading… extractor（提取器） 定义如何从ajax返回值中提取内容,返回被提取的数据。 extractor: function(data){ var pattern = /]*>((.|[\\n\\r])*)<\\/body>/im; var matches = pattern.exec(data); functio if (matches){ n（函数） return matches[1]; // only extract body content } else { return data; } } 事件

名称 参数 描述 onLoad onBeforeOpen onOpen onBeforeClose onClose onBeforeDestroy onDestroy none none none none none none none 在远程数据被载入时触发。 在控制面板被打开之前触发，返回false将停止打开。 在控制面板被打开之后触发。 在控制面板被关闭之前触发，返回false将取消关闭。 在控制面板被关闭后触发。 在控制面板被注销前触发，返回false将取消注销。 在控制面板被注销后触发。 在控制面板被折叠之前触发，返回false将停止折叠。 在控制面板被折叠之后触发。 在控制面板被扩展之前触发，返回false将停止扩展（这里应该是指扩展区域，宽、高等）。 在控制面板被扩展之后触发。 在控制面板被缩放后触发。 width： 新的控制面板宽度 height：新的控制面板高度 在控制面板被移动后触发。 left：新的控制面板左边距 top：新的控制面板顶边距 在控制面板被最大化后触发 在控制面板被重置为初始大小后触发。 在控制面板被最小化后触发。 onBeforeCollapse none onCollapse onBeforeExpand onExpand onResize none none none width, height onMove onMaximize onRestore onMinimize 方法

名称 options panel header body left,top none none none 参数 none none none none 返回选项属性。 返回控制面板对象。 描述 返回控制面板头对象。 返回控制面板主体对象。 setTitle title open close destroy refresh forceOpen forceClose forceDestroy href 设置控制面板头部的标题文本。 当参数forceOpen设置为true时，控制面板将被打开，不受onBeforeOpen回调函数的约束。 当参数forceClose设置为true时, 控制面板将被打开，不受onBeforeClose回调函数的约束。 当参数forceDestroy设置为true时,控制面板将被打开，不受onBeforeDestroy回调函数的约束。 当href属性被设置时，刷新控制面板以载入远程数据。 这是控制面板的尺寸并且进行布局。options对象包含以下2个属性: width： 新的控制面板宽度 height： 新的控制面板高度 left： 新的控制面板左边距 top： 新的控制面板顶边距 移动控制面板到一个新的位置。options对象包含以下2个属性: left： 新的控制面板左边距 top： 新的控制面板顶边距 使控制面板铺满整个容器。 最小化控制面板。 使最大化的控制面板重置为其初始化时的大小和位置。 折叠控制面板主体。 扩展控制面板主体。 resize options move options maximize none minimize none restore none collapse animate expand 2.2 选项卡 选项卡切换

animate 使用$.fn.tabs.defaults重载默认值。

依赖关系 控制面板 ? 链接按钮

?

使用方法 创建选项卡

1. 使用HTML标签创建选项卡

使用HTML标签创建选项卡十分简单，不需要写任何javascript代码，只需要标签引用'easyui-panel'类。每个选项卡面板都可以使用闭合的标签对创建，使用方法跟创建控制面板一样。

1. 2. 3. tab1 4. 5. 6. tab2 7. 8. 9. tab3 10. 11. 2. 使用脚本创建选项卡

下面的代码演示如何使用脚本创建选项卡，当该选项卡被选择时将会触发'onSelect'事件。

1. $('#tt').tabs({ 2. border:false, 3. onSelect:function(title){ 4. alert(title+' is selected'); 5. } 6. }); 添加一个选项卡面板

1. //添加一个选项卡面板 2. $('#tt').tabs('add',{ 3. title:'New Tab', 4. content:'Tab Body', 5. closable:true 6. }); 获取当前被选择的选项卡

1. //获取当前被选择的选项卡以及相应的选项卡对象 2. var pp = $('#tt').tabs('getSelected'); 3. var tab = pp.panel('options').tab; //相应的选项卡对象 属性

名称

width（宽度） height（高度） plain（简洁模式）

类型 number（数字） number（数字） boolean（布尔型） boolean（布尔型） boolean（布尔型） number（数字） number（数字） array（数组）

描述

选项卡所在容器（控制面板）

的宽度。

选项卡所在容器（控制面板）的高度。

如果设置为true，将不显示控制面板背景。

设置为true时，选项卡的大小将铺满它所在的容器（浏览器）。

默认值 auto auto false

fit（铺满浏览器） false

border（边框） scrollIncrement（滚动增量）

scrollDuration（滚动时间）

tools（工具栏）

如果设置true，将显示选项卡

true

所在容器（控制面板）的边框。 选项卡滚动条每次滚动的像素值。

每次滚动持续的时间，单位为毫秒。

控制面板右侧的工具栏，每个工具选项都跟链接按钮一样。

100 400 null

事件

名称 onLoad onSelect onBeforeClose onClose onAdd onUpdate onContextMenu 方法

名称 options tabs resize add

参数 none none none options

返回选项卡属性对象。 返回所有的选项卡面板。

重置选项卡容器（控制面板）大小并且自动布局。 添加一个新的选项卡面板，options参数是一个可以配置的对象，查看选项卡控制面板属性获取更多信息。

关闭一个选项卡面板，title参数表示哪个选项卡将被关闭。

获取特定的选项卡面板名称。 获取被选择的选项卡面板名称。 选择一个选项卡面板。

验证一个特定的选项卡面板是否存在。

更新特定的选项卡面板，param参数包含2个属性: tab: 将被更新的选项卡。 options: 选项卡相关配置项。

描述

参数 panel title title title title title e, title

描述

当一个选项卡完成ajax远程载入对象时触发。 当用户选择一个选项卡时触发。

在一个选项卡被关闭之前触发，返回false将取消关闭。

在用户关闭一个选项卡面板后触发。 在一个选项卡面板被添加后触发。 在一个选项卡面板被更新后触发。 在一个选项卡面板被鼠标右键单击后触发。

close getTab getSelected select exists update

title title none title title param

选项卡面板

选项卡面板属性在控制面板组件中定义，以下是一些常用属性。

名称 类型 描述 默认值

title（标题） content（内容） href（超链接） cache（缓存） iconCls（图标CSS类） width（宽度） height（高度） 一些额外属性

名称 closable（可关闭） selected（默认选项卡） 2.3 可伸缩面板 可伸缩面板

使用$.fn.accordion.defaults重载默认值

类型 boolean（布尔型） boolean（布尔型） 描述 当这是为true时，选项卡面板将会显示一个关闭按钮，点击该按钮将关闭选项卡。 当设置为true时，将会默认显示该选项卡下的内容。 默认值 false string（字符串） string（字符串） string（字符串） boolean（布尔型） string（字符串） number（数字） number（数字）

选项卡面板的标题。 选项卡面板的内容。

从超链接载入远程内容到选项卡面板。

null

设置为true将缓存选项卡面板，当

true

href（超链接）属性被设置时有效。 一个显示选项卡面板标题图标的CSS类。

选项卡面板的宽度。 选项卡面板的高度。

null auto auto

false

依赖关系

?

控制面板

使用方法 创建可伸缩面板

使用html标签创建可伸缩面板，只须要对标签引用'easyui-accordion'类。 1. 2. 3.

Accordion for jQuery

4.

Accordion is a part of easyui framework for jQuery. 5. It lets you define your accordion component on web page more easily.

6. 7. 8. content2 9. 10. 11. content3 12. 13. 在后面将介绍如何改变或者重建可伸缩面板以及修改一些特性。 1. $('#aa').accordion({ 2. animate:false

3. });

刷新可伸缩面板的内容

调用'getSelected'方法获取当前面板（的名称），接着可以调用控制面板的'refresh'方法来载入新的内容。

1. var pp = $('#aa').accordion('getSelected'); //获取当前选择的可伸缩面板 2. if (pp){ 3. pp.panel('refresh','new_content.php'); //调用'refresh'方法载入新内容 4. }

容器属性（可伸缩面板所在的容器，通常称为‘盒子’）

名称 width（宽度） height（高度） fit（铺满浏览器）

border（边框） animate（动画效果） 可伸缩面板属性

可伸缩面板继承控制面板的属性，以下是额外的属性:

名称 类型 描述 设置为true将默认展开面板。 默认值 false 类型 number（数字） number（数字） boolean（布尔型） boolean（布尔型） boolean（布尔型）

描述

可伸缩面板所在容器的宽度。 可伸缩面板所在容器的高度。 如果设置为true，可伸缩面板所在容器将铺满它所在的父容器（浏览器）

定义是否显示边框。

定义当延伸或者折叠面板时是否显示动画效果。

默认值 auto auto

false

true true

selected（被选择） boolean（布尔型） 事件

名称 onSelect onAdd onBeforeRemove onRemove 方法

名称 options panels resize getSelected getPanel select add remove

2.4 布局面板 布局面板

参数 none none none none title title options title

描述

返回容器属性对象。 获取所有的面板。 重置可伸缩面板。 获取被选择的面板。 获取特定的可伸缩面板。 选择特定的面板。

添加一个先的可伸缩面板。 移除特定的面板。 参数 title title title title 描述 当一个可伸缩面板被选择时触发。 在一个新面板被添加时触发。 在可伸缩面板被移除之前触发，返回false将取消移除。 在一个可伸缩面板被移除时触发。

依赖关系 控制面板 ? 缩放

?

使用方法 创建布局面板

使用HTML标签创建布局面板，只须要对标签引用'easyui-layout'类。 1. 2. 3. 4. 5. 6. 7. 在整个页面创建布局面板。

1. 2. 3. 4. 5. 6. 7.

折叠布局面板

1. $('#cc').layout(); 2. //折叠左边的面板 3. $('#cc').layout('collapse','west');

布局面板属性

名称 title（标题）

类型 string（字符串）

描述

布局面板的标题。

定义布局面板的位置（方向），可以取下列值的其中之一：north, south, east, west, center。

设置为true将显示布局面板的边框。 如果设置为true将显示一个分隔条，用户可以拖动分隔条来改变布局面板的尺寸。

一个用来显示布局面板头部图标的css类。

一个用来从远程站点载入数据的超链接。

默认值 null

string（字符

region（区域）

串） border（边框）

boolean（布尔型）

true

boolean（布

split（分隔条）

尔型） iconCls（图标CSS类） href（超链接） 方法

string（字符

串） string（字符串）

false

null null

名称 resize panel collapse expand 参数 none region region region 描述 设置布局面板的尺寸大小。 返回特定的布局面板，'region'参数的可取值为：'north','south','east','west','center'。 折叠特定的布局面板，'region'参数的可取值为：'north','south','east','west'。 延伸特定的布局面板，'region'参数的可取值为：'north','south','east','west'。 3. 菜单和按钮

3.1 菜单 菜单

使用$.fn.menu.defaults重载默认值。

使用方法 创建菜单

使用HTML标签创建菜单必须对标签引用'easyui-menu'类，每个菜单项都将使用标签创建。为菜单添加'iconCls'属性可以指定一个显示在菜单项左侧的图标。对菜单引用'menu-sep'类将生成一条菜单分隔线。

1. 2. New 3. 4. Open 5. 6. Word

7. Excel 8. PowerPoint 9. 10. 11. Save 12. 13. Exit 14. 使用脚本创建菜单并且监听'onClick'事件 1. $('#mm').menu({ 2. onClick:function(item){ 3. //... 4. } 5. }); 显示菜单

当一个菜单创建完毕，它是隐藏而不可见的，调用'show'方法可以显示菜单。 1. $('#mm').menu('show', { 2. left: 200, 3. top: 100 4. }); 属性

名称 zIndex（堆叠顺序） left（左边距） top（顶边距） 事件 名称 onShow 参数 none 描述 当一个菜单被显示后触发。 类型 number（数字） number（数字） number 描述 菜单的z-index样式,从第一个菜单开始递增。 菜单的左边距。 菜单的顶边距。 默认值 110000 0 0 onHide onClick 方法

名称

none item 在一个菜单被隐藏后触发。 当一个菜单被点击时触发。 参数 描述

在一个特定的位置显示菜单。 pos参数有2个属性： left：新的左边距。 top：新的顶边距。 隐藏一个菜单。

获取菜单项数据并将其返回, 数据包含以下属性： target：DOM对象，菜单项目。 id：字符串，分配给元素的ID。 text：字符串，菜单项的文本。 href：字符串，超链接地址。

disabled：布尔型，菜单项是启用还是禁用。

onclick：函数, 当用户点击菜单时将要执行的函数。 iconCls：字符串，图标css类。

设置特定的菜单文本，'param'参数包含2个属性： target：DOM对象，将要被设置的菜单项。 text：字符串，新的文本值。

设置特定的菜单项图标，'param'参数包含2个属性： target：DOM对象，菜单项目。 iconCls: 新的图标css类。

查找特定的菜单项，和getItem方法返回的对象相同。 添加菜单，'param'参数包含以下属性：

parent: 待添加新菜单的DOM对象，如果没有被设置，新菜单项将会被作为顶级菜单添加。 text：字符串，菜单项文本。 href：字符串，超链接地址。

onclick：字符串或者函数，当用户点击菜单项时将要被执行的脚本代码或者函数。 iconCls: string, the icon class. 移除特定的菜单项。 启用菜单项。 禁用菜单项。

show pos

hide none

getItem itemEl

setText param

setIcon findItem

param text

appendItem param

removeItem enableItem disableItem

itemEl itemEl itemEl

3.2 链接按钮 链接按钮

使用$.fn.linkbutton.defaults重载默认值

使用方法

1. easyui 1. $('#btn').linkbutton({ 2. plain:true 3. }); 4. $('#btn').linkbutton('disable'); //禁用按钮 5. $('#btn').linkbutton('enable'); //启用按钮 属性

名称 id（ID） disabled（禁用） plain（简洁模式） text（文本） iconCls（图标CSS类） 方法 名称 options disable enable 参数 none none none 描述 返回属性对象。 禁用按钮。 启用按钮。 类型 string（字符串）

boolean（布尔型）

boolean（布尔型） string（字符串） string（字符串）

描述

分配给该组件的ID。 设置为true将禁用按钮。 设置为true将显示简洁效果。 显示在按钮上的文本。 用来在左边显示一个16x16大小图标的css类。

默认值 null false false '' null

3.3 菜单按钮 菜单按钮

继承$.fn.linkbutton.defaults，使用$.fn.menubutton.defaults重载默认值。

依赖关系 菜单

? 链接按钮

?

使用方法

1. Edit 2. 3. Undo 4. Redo 5. 6. Cut 7. Copy 8. Paste 9. 10. Delete 11. Select All 12. 1. $('#mb').menubutton({ 2. menu: '#mm' 3. }); 属性

继承linkbutton的属性, 以下是菜单按钮独有的属性。

名称 plain（简洁模式） menu（菜单） duration（持续时间） 方法 名称 options disable enable 3.4 分隔按钮 分隔按钮

参数 none none none 类型 boolean（布尔型） string（字符串） number（数字） 描述 设置为true将显示简洁效果。 默认值 true 用来创建一个相应菜单的选择器。 null 定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒。 100 描述 返回属性对象。 禁用菜单按钮。 启用菜单按钮。 继承$.fn.linkbutton.defaults，使用$.fn.splitbutton.defaults重载默认值。

依赖关系 菜单

? 链接按钮

?

使用方法

1. Ok 2. 3. Ok 4. Cancel 5. 1. $('#sb').splitbutton({ 2. menu:'#mm' 3. }); Properties

属性继承链接按钮, 以下是分隔按钮的独有属性。

名称 plain（简洁模式） menu（菜单） duration（持续时间） 方法 名称 options disable enable 参数 none none none 描述 返回属性对象。 禁用分隔按钮。 启用分隔按钮。 类型 boolean（布尔型） string（字符串） number（数字） 描述 设置为true将显示简洁效果。 默认值 true 用来创建一个相应菜单的选择器。 null 定义鼠标划过按钮时显示菜单所持续的时间，单位为毫秒。 100 4. 表单

4.1 表单 表单 使用方法

1. 使用ajax方式提交表单

1. $('#ff').form({ 2. url:..., 3. onSubmit: function(){ 4. //进行表单验证 5. //如果返回false阻止提交 6. }, 7. success:function(data){ 8. alert(data) 9. } 10. }); 11. //提交表单 12. $('#ff').submit(); 普通方式提交

1. //调用表单插件的'submit'方法提交 2. $('#ff').form('submit', { 3. url:..., 4. onSubmit: function(){ 5. //进行表单验证 6. //如果返回false阻止提交 7. }, 8. success:function(data){ 9. alert(data) 10. } 11. }); 属性

名称 url（目标网址） 事件

名称 onSubmit success 参数 none data 描述 在表单提交之前触发，返回false将阻止表单提交。 当表单成功提交时触发。 类型 string（字符串） 描述 表单提交的目标网址 默认值 null onBeforeLoad onLoadSuccess onLoadError 方法 名称 参数 param data none 在发送载入远程数据请求之前触发，返回false将取消请求。 在表单数据被载入时触发。 在载入表单数据发生错误时触发。 描述 执行表单提交，options参数是一个包含以下属性的对象： url：表单提交的目标网址 onSubmit：在表单提交之前执行的回调函数 success: 在表单成功提交后执行的回调函数 载入记录填充表单。 data参数可以是字符串或者对象类型，当传入字符串时，data参数必须是一个远程url地址，否则用户必须自定义要载入的数据 清除表单数据 执行表单域验证，如果全部表单域有效返回true，该方法与表单验证插件一起使用。 submit options load data clear validate none none 4.2 表单验证 表单验证

使用$.fn.validatebox.defaults重载默认值。

使用方法

1. 1. $('#vv').validatebox({ 2. required:true 3. }); 验证规则

验证规则使用required和validType属性来定义, 以下列出的是插件内置的验证规则。

email: 正则匹配电子邮件。 ? url: 正则匹配url。

? length[0,100]: 验证长度范围。

? remote['http://.../action.do','paramName']: 发送ajax请求来验证，验证有效时返回true。

?

要自定义规则，重载$.fn.validatebox.defaults。你所定义的验证规则必须定义一个验证函数和验证无效时的提示信息。例如，定义一个验证最小长度的规则： 1. $.extend($.fn.validatebox.defaults.rules, { 2. minLength: { 3. validator: function(value, param){ 4. return value.length >= param[0]; 5. }, 6. message: 'Please enter at least {0} characters.' 7. } 8. }); 现在你可以使用最小长度验证规则来定义一个至少要输入5个字符的输入框。 1. 属性

名称

required（必填）

类型 boolean（布尔型）

描述

定义表单域必须填写。

定义表单域的验证类型，比如：email, url等。

当表单域未填写时出现的提示信息。 当表单域的内容被验证为无效时出现的提示。

默认值 false

string（字符

validType（验证类型）

串） missingMessage（未填提示）

invalidMessage（无效提示） 方法 名称 destroy 参数 none 移除并注销组件。 string（字符串） string（字符串）

null This field is required. null

描述 validate isValid none none 验证表单域的内容是否有效。 调用validate方法并且返回验证结果，true或者false。 4.3 自定义组合框 自定义组合框

继承$.fn.validatebox.defaults，使$.fn.combo.defaults重载。

依赖关系 表单验证 ? 控制面板

?

使用方法

1. 2. 1. $('#cc').combo({ 2. required:true, 3. multiple:true 4. }); 属性

属性继承表单验证,以下是只读组合框独有的属性。

名称 width（宽度） 类型 number（数字） 描述 组合框的宽度。 默认值 auto

panelWidth（下拉框宽度）

panelHeight（下拉框高度）

multiple（可多选） separator（分隔条） editable（可编辑） disabled（禁用） hasDownArrow（下拉图标） value（值） delay（延迟）

number（数字） number（数字） boolean（布尔型） string（字符串） boolean（布尔型） boolean（布尔型） boolean（布尔型） string（字符串） number（数字）

下拉框的宽度。 下拉框的高度。 定义是否支持多选。

当支持多选时，用以分隔文本的字符。

定义用户是否可以直接向组合框输入内容。

定义是否禁用输入框。 定义是否显示下拉按钮。 默认值。

最后一次输入事件与搜索（自动完成）之间的延迟间隔。

null 200 false , true false true

200

keyHandler（按键助手） object（对象）

当用户按下一个键位时调用的函数，默认的按键助手定义如下：

keyHandler: { up: function(){}, down: function(){}, enter: function(){}, query: function(q){} }

事件

名称 onShowPanel none 参数 描述 当显示下拉面板的时候触发。 onHidePanel onChange 方法

none newValue, oldValue 当隐藏下拉面板的时候触发。 当组合框的值发生改变时触发。 方法继承表单验证，以下是只读组合框独有的方法。

名称 options panel textbox destroy resize showPanel hidePanel disable enable validate isValid clear getText setText getValues setValues getValue setValue

4.4 可装载组合框 可装载组合框

继承$.fn.combo.defaults，使用$.fn.combobox.defaults重载默认值。

参数 none none none none width none none none none none none none none text none values none value

返回属性对象。 返回下拉面板对象。 返回文本框对象。 销毁组件。 调整组件的宽度。 显示下拉面板。 隐藏下拉面板。 禁用组合框。 启用组合框。 验证输入的值。 返回验证结果。 清除组件的值。 获取组合框的值。 设置组合框的值。

返回一个存储下拉面板值的数组。

设置下拉面板的值，参数values是一个数组。 获取下拉面板的值。 设置下拉面板的值。

描述

依赖关系

?

自定义组合框

使用方法

1. 2. aitem1 3. bitem2 4. bitem3 5. ditem4 6. eitem5 7. 1. 1. $('#cc').combobox({ 2. url:'combobox_data.json', 3. valueField:'id', 4. textField:'text' 5. }); The json data format sample: 1. [{ 2. \:1, 3. \:\ 4. },{ 5. \:2, 6. \:\ 7. },{ 8. \:3, 9. \:\, 10. \:true 11. },{ 12. \:4, 13. \:\ 14. },{ 15. \:5, 16. \:\ 17. }] 属性

继承自定义组合框的属性, 以下是可装载组合框的独有属性。

名称 valueField（值域）

textField（文本域）

mode（模式） url（超链接地址）

method（方法） data（数据）

类型 string（字

符串） string（字符串） string（字符串） string（字符串） string（字符串） array（数组）

描述

绑定到组合框下的数据的值域的名称。

绑定到组合框下数据的文本域的名称。

定义当文本发生改变时，如何载入数据列表。如果组合框要从远程地址载入数据，设置为'remote'。 可供载入数据列表的远程地址。 获取数据的HTTP方法。 将被载入的数据列表。

定义当模式设置为'local'时如何过滤本地数据，function有2个参数： q: 用户输入的文本。 row: 数据列表

返回true将允许显示数据列表。 定义如何返回数据，function有一个参数：row。

默认值 value text

local

null post null

filter（过滤器）

function

（函数）

formatter(格式) 事件

function（函数）

事件继承自定义组合框，以下是可装载组合框的独有事件。

名称 onLoadSuccess onLoadError onSelect 参数 none none record 描述 当远程数据载入成功时触发。 当远程数据载入错误时触发。 当用户选择一个列表项时触发。 onUnselect 方法

record 当用户取消选择一个列表项时触发。 方法继承自定义组合框，以下是可装载组合框独有的或者重载自定义组合框的方法。

名称 options getData loadData reload setValues setValue clear select unselect

4.5 组合树 组合树

继承$.fn.combo.defaults和$.fn.tree.defaults，使用$.fn.combotree.defaults重载默认值。

参数 none none data url values value none value value

返回属性对象。 返回已载入的数据。 载入本地数据列表。 请求远程数据列表。

设置组合框的值，参数values是一个数组。 设置组合框的值。 清除组合框的值。 选择特定的项目。 取消选择特定的项目。

描述

依赖关系

自定义组合框 ? 树形菜单

?

使用方法

1. 1. 1. $('#cc').combotree({ 2. url:'tree_data.json' 3. }); 属性

属性继承自定义组合框和树形菜单，以下是组合树重载的属性。

名称 类型 描述 定义用户是否可以直接输入。 默认值 false editable（可编辑） boolean（布尔型） 事件

事件继承自定义组合框和树形菜单 方法

方法继承自定义组合框，以下是组合树独有的或者重载自定义组合框的方法。

名称 options tree loadData reload clear setValues setValue 4.6 组合表格 组合表格

参数 none none data url none values value 返回属性对象。 返回树形菜单对象。 载入本地树形菜单数据。 再次向远程树形菜单数据发起请求。 清除组件值。 设置组合框的值，参数values是一个数组。 设置组合框的值。 描述 继承$.fn.combo.defaults和$.fn.datagrid.defaults，使用$.fn.combogrid.defaults重载默认值。

依赖关系

自定义组合框 ? 数据表格

?

使用方法

1. 1. 1. $('#cc').combogrid({ panelWidth:450, value:'006', idField:'code', textField:'name', url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:60}, {field:'name',title:'Name',width:100}, {field:'addr',title:'Address',width:120}, {field:'col4',title:'Col41',width:100} ]] }); 属性

属性继承自定义组合框和数据表格，以下是组合表格独有的属性。

名称 loadMsg（载入时信息） idField（id字段） 类型 string（字符串） string（字符串） 描述 当数据表格载入远程数据时的提示信息。 标识表格行数据唯一性的字段名。 默认值 null null textField（文本域） string（字符串） string（字符串） 显示在文本框中的文本域的名称。 定义当文本发生改变时如何载入组合表格的数据。如果组合表格要从远程服务器载入数据，设置为'remote'。 定义当模式设置为'local'时如何选择本地数据，返回true将选择一行。 null mode（模式） local filter（过滤器） 事件

function(q, row) 事件继承自定义组合框和数据表格。 方法

方法继承自定义组合框，以下是组合表格独有的或者重载自定义组合框的方法。

名称 options grid 参数 none none 返回属性对象。 返回数据表格对象。 描述 setValues values 设置组合框的值，参数values是一个数组。 setValue clear 4.7 数字验证框 数字验证框

继承$.fn.validatebox.defaults，使用$.fn.numberbox.defaults重载默认值。 依赖关系

?

value none 设置组合框的值 清除组合框的值。 表单验证

使用方法

1. 1. $('#nn').numberbox({ 2. min:0, 3. precision:2 4. }); 属性

属性继承表单验证，以下是数字验证框的独有属性。

名称 disabled（禁用） min（最小值） max（最大值） 类型 描述 默认值 false null null 0 boolean（布尔型） 定义是否禁用输入框。 number（数字） number（数字） 允许的最小值。 允许的最大值。 精确到小数点后的最大位数。 precision（精度） number（数字） Methods（方法）

方法继承表单验证，以下是数字验证独有的或者重载表单验证的方法。 名称 disable enable fix 4.8 日期组合框 日期组合框

继承$.fn.combo.defaults，使用$.fn.datebox.defaults重载默认值。

参数 none none none 禁用输入框。 启用输入框。 将输入框的值修正为一个有效值。 描述

依赖关系

自定义组合框 ? 日历

?

使用方法

1. 1. $('#dd').datebox({ 2. required:true 3. }); 属性

属性继承自定义组合框，以下是日期组合框独有的属性。

名称 panelWidth（面板宽度） panelHeight（面板高度） currentText（当前文本） closeText（关闭） okText（OK按钮文本）

类型 number（数字） number（数字） string（字符串） string（字符串） string（字符串）

描述

下拉日历面板的宽度。 下拉日历面板的高度。 显示在日历左下角用以选择今天日期的按钮上的文本。 显示在关闭按钮上的文本。 显示在OK按钮上的文本。 当设置为true时禁用输入框。

默认值 180 auto Today Close Ok false

disabled（禁用） boolean（布

本文来源：https://www.bwwdw.com/article/o3mo.html