jQueryEsayUI基础

2022/7/12 6:22:17

编程Tag： 组件属性基础默认面板 boolean None jQueryEsayUI

本文主要是介绍jQueryEsayUI基础，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

第一章、Jquery Easy UI入门

1.什么是Jquery Easy UI？

JQuery EasyUI是一组给予jQuery的ui插件集合，它的目标是帮助web开发者更轻松的打造出功能丰富且美观的UI界面。

2.jQuery EasyUI兼容性：随着ui版本的不断更新，有些版本不再兼容低版本的某些浏览器，若需要在低版本浏览器上使用，则需要选择低版本的UI。

3.使用jQuery Easy UI需要引入的文件：jquery.min.js、easyui.min.js、icon.css、easyui.css。也可以使用easyload.js智能引入。

第二章、使用EasyUI

1.加载UI组件的方式：a.使用clas加载、b.使用js调用加载。

<div class=“easyui-dialog” data-opations=”属性:值”>内容部分</div> //class方式加载

$(“#id”).dialog( {属性:值 }); //使用js调用加载

2.当使用easyload.js智能加载时，js代码调用格式：

easyloader.load( ‘ dialog’ , function(){ $(“#id”).dialog();} );该方法第一个参数表示使用dialog组件，第二个参数表示使用方式。

3.Parser解析器：专门用于解析UI组件，通常情况下是自动完成解析的，有时候也需要手动解析。

第三章、Draggable（拖动）组件

1.属性列表：

属性名	默认/值	说明
Proxy	null/string/function	当使用”clone”时，则克隆一个替代元素拖动，若指定函数，则自定义替代元素（通过函数返回）。
revert	false/boolean	设置是否拖动停止时返回起始位置。
cursor	move/string	拖动时指针样式。
deltaX	null/number	被拖动的元素对应于当前光标的水平位置。
deltaY	null/number	被拖动的元素对应于当前光标的垂直位置。
handle	null/selector	开始拖动的句柄。
disabled	false/boolean	设置为true，则停止拖动。
edge	0/number	可以在其中拖动的容器的宽度。
axis	null/string	设置水平拖动v还是垂直拖动h。

2.事件列表：

事件名	传参	说明
onBeforeDrag	e	拖动之前触发，若返回false将取消拖动。
onStarDrag	e	拖动开始时触发。
onDrag	e	拖动过程中触发，不能拖动时返回false。
onStopDrag	e	拖动停止时触发。

3.重写默认值对象：$.fn.draggable.defaults.属性=值;

4.方法列表：

方法名	传参	说明
options	none	返回属性对象。
enable	none	启用拖动。
disable	none	禁用拖动。
Proxy	none	如果代理属性被设置则返回该拖动代理元素。

第四章、Droppable（放置）组件

1.属性列表：

属性名	值	说明
accept	selector	默认为null，用于确定哪些元素被接受。
disabled	boolean	默认为false，设置是否禁止放置。

2.事件列表：

事件名	传参	说明
onDragEnter	e，source	在被拖拽元素到放置区内的时候触发。
onDragOver	e，source	在被拖拽元素经过放置区的时候触发。
onDragLeave	e，source	在被拖拽元素离开放置区的时候触发。
onDrop	e，source	在被拖拽元素放入到放置区的时候触发。

3.方法列表：

方法名	传参	说明
options	none	返回属性对象。
enable	none	启用放置功能。
disable	none	禁用放置功能。

第五章、Resizable（调整大小）组件

1.属性列表：

属性名	值	说明
disabled	boolean	是否禁用调整。
handles	string	默认为n,e,s,w,ne,se,sw,nw,all,声明调整的方位。
minWidth	number	限制调整的最低宽度。
minHeight	number	限制调整的最低高度。
maxWidth	number	限制调整的最大宽度。
maxHeight	number	限制调整的最大高度。
edge	number	默认为5，边框边缘触发大小。

2.事件列表

事件名	传参	说明
onStartResize	e	在开始改变大小的时候触发。
onResize	e	在调整大小期间触发，当返回false时不会实际改变DOM元素大小。
onStopResize	e	在停止改变大小时触发。

3.方法列表：

方法名	传参	说明
options	none	返回属性对象。
enable	none	启用调整功能。
disable	none	禁用调整功能。

第六章、Tooltip（提示框）组件

1.属性列表：

属性名	值	说明
position	string	提示框的位置。默认bootom，还有left、right、top。
content	string	提示框内容。默认null。
trackMouse	boolean	设置是否允许提示框跟随鼠标移动。默认false。
deltax	number	水平方向提示框的位置。默认0。
deltay	number	垂直方向提示框的位置。默认0。
showEvent	string	当激活事件的时候显示提示框，默认为mouseenter事件。
hideEvent	string	当激活事件的时候隐藏提示框，默认为mouseleave事件。
showDelay	number	延迟多少毫秒显示提示框，默认200。
hideDelay	number	延迟多少毫秒隐藏提示框，默认100。

2.事件列表：

事件名	传参	说明
onShow	e	在显示提示框的时候触发。
onHide	e	在隐藏提示框的时候触发。
onUpdate	conten	在提示框内容更新的时候触发。
onPosition	left、top	在提示框位置改变的时候触发。
onDestroy	none	在提示框被销毁的时候触发。

3.方法列表：

方法名	传参	说明
options	none	返回属性对象。
tip	none	返回tip元素对象。
arrow	none	返回箭头元素对象。
show	e	显示提示框。
hide	e	隐藏提示框。
update	content	更新提示框内容。
reposition	none	重置提示框位置。
destroy	none	销毁提示框。

第七章、LinkButton（按钮）组件

1.属性列表：

属性名	值
id	string	组件的id属性，默认为null
disabled	boolean	是否禁用按钮，默认false
toggle	boolean	设置为true则允许用户切换其状态是否被选中，可实现checkbox复选效果，默认false
selected	boolean	定义按钮的初始选择状态，true表被选中，默认false
group	string	指定按钮属于哪一个组，相当于radio单选效果，默认null
plain	boolean	设置是否显示简洁效果，默认false
text	string	按钮文字，默认空
iconCls	string	显示在按钮文字左侧的图标的css类id
iconAliagn	string	按钮图标位置，默认left，还有riaght

2.方法列表：

方法名	传参	说明
options	none	返回属性对象
disable	none	禁用按钮
enable	none	启用按钮
select	none	选择按钮
unselect	none	取消选择按钮

第八章、ProgressBar（进度条）组件

1.属性列表：

属性名	值	说明
width	string	设置进度条宽度。默认auto
height	number	设置进度条高度。默认22
value	number	设置进度条值。默认0
text	string	设置进度条百分比模板，默认{value}%

2.事件列表：

事件名	传参	说明
onchange	newValue，oldValue	在值更改时触发

3.方法列表：

方法名	传参	说明
opations	none	返回属性大小
resize	width	组件大小
getValue	none	返回当前进度
setValue	value	设置一个新的进度值

第九章、Panel（面板）组件

1.属性列表：

属性名	值	说明
id	string	面板的id值。默认null
title	string	面板显示的标题文本。默认null
iconCls	string	设置一个图标的css类id显示在面板左上角。默认null
width	number	面板宽度。默认auto
height	number	面板高度。默认auto
left	number	面板距离左边的距离。默认null
top	number	面板句顶部的距离。默认null
cls	string	添加一个css类id到面板。默认null
headerCls	string	添加一个css类id到面板头部。默认null
bodyCls	string	添加一个css类id到面板正文部分。默认null
style	subject	添加一个指定样式到面板。默认{}
fit	boolean	设置面板大小是否自适应父容器。默认false
border	boolean	是否显示面板边框。默认true
doSize	boolean	是否在创建面板时重置大小和重新布局。默认true
noheader	boolean	是否不创建面板标题。默认false
content	string	面板主体内容。默认null
collapsible	boolen	是否显示可折叠按钮。默认false
minimizable	boolean	是否显示最小化按钮。默认false
maximizable	boolean	是否显示最大化按钮。默认false
closeable	boolean	是否显示关闭按钮。默认false
tools	array\selector	自定义工具菜单，可用值： 1、数组：每个元素都包含iconCls和handler属性 2、指向工具菜单的选择器
collapsed	boolean	是否在初始化时折叠面板。默认false
minimized	boolean	是否在初始化时最小化面板。默认false
maximized	boolean	是否在初始化时最大化面板。默认false
closed	boolean	是否在初始化时关闭面板。默认false
href	string	从url读取远程数据显示到面板。默认null
cache	boolean	是否在超链接载入时缓存面板内容。默认true
loadingMessage	string	远程加载数据时在面板显示的一条提示信息
ectractor	function	定义如何从ajax应答数据中提取内容，返回提取数据

2.事件列表：

事件名	传参	说明
onBeforeLoad	none	在加载远程数据之前触发
onLoad	none	在加载远程数据时触发
onBeforeOpen	none	在打开面板之前触发，返回false可取消打开操作
onOpen	none	在打开面板之后触发
onBeforeClose	none	在关闭面板之前触发，返回false可取消关闭操作
onClose	none	在面板关闭之后触发
onBeforeDestroy	none	在销毁面板之前触发，返回false可取消销毁操作
onDestory	none	在面板销毁之后触发
onBeforeCollapse	none	在折叠面板之前触发，返回false可取消折叠操作
onCollapse	none	在面板折叠之后触发
onBeforeExpand	none	在展开面板之前触发，返回false可取消展开操作
onExpand	none	在面板展开之后触发
onResize	width、height	在面板改变大小之后触发，width、height指新的宽高度
onMove	left、top	在面板移动之后触发，left、top指新的左上边距
onMaximize	none	在最大化窗口之后触发
onRestore	none	在窗口恢复到元素大小之后触发
onMinimize	none	在最小化窗口之后触发

3.方法列表：

方法名	参数	说明
options	none	返回属性对象
panel	none	返回面板对象
header	none	返回面板头对象
body	none	返回面板主体对象
setTitle	title	设置面板头的标题
open	forceOpen	在forceOpen参数设置为true时，打开面板将跳过onBeforeOpen回调函数
close	forceClose	在forceClose’参数设置为true时，关闭面板将跳过onBeforeClose回调函数
destroy	forceDetroy	在forceDetroy参数设置为true时，销毁面板将跳过onBeforeDestroy回调函数
refresh	href	刷新面板来加载远程数据
resize	options	设置面板大小和布局，options对象包括宽高和左上边距
move	options	移动面板到一个新位置，options对象包括左上边距
maximize	none	最大化面板到容器大小
minimize	none	最小化面板
restore	none	恢复最大化面板到原来的大小和位置
collapse	animate	折叠面板主体
expand	animate	展开面板主体

第十章、Tabs（选项卡）组件

1.该Tabs选项卡组件依赖于Panel面板组件（选项卡组件本身就是相互切换显示的面板组成的）和LinkButton按钮组件（选项卡组件可以实现LinkButton按钮）。

2.属性列表：

属性名	值	说明
width	number	选项卡容器宽度。默认auto
height	number	选项卡容器高度。默认auto
plain	boolean	设置为true时，将不显示控制面板背景。默认false
fit	boolean	设置为true时，选项卡大小将铺满它的父容器。默认false
border	boolean	设置为true时，显示选项卡容器边框。默认true
scrollIncrement	number	选项卡滚动条每次滚动的像素值。默认100
scrollDuration	number	每次滚动动画持续的时间，单位毫秒。默认400
tools	array\selector	工具栏添加在选项卡面板的左侧或右侧。默认null
toolPosition	string	工具栏位置。默认right
tabPosition	string	选项卡位置。默认top
headrWidth	number	选项卡标题宽度。只有设置了tabPosition时才有效
tabWidth	number	标签条的宽度。默认auto
tabHeight	number	标签条的高度。默认27
selected	number	初始化选中一个tab页。默认0
showHeader	boolean	设置为true时，显示tab页标题。默认true

3.事件列表：

事件名	传参	说明
onLoad	panel	在ajax选项卡面板加载完远程数据时触发
onSelect	title、index	用户选择一个选项卡面板的时候触发
onUnselect	title、index	用户取消选择一个选项卡面板的时候触发
onBeforeClose	title、index	在选项卡面板关闭的时候触发，返回false将取消关闭操作
onClose	title、index	在用户关闭一个选项卡的时候触发
onAdd	title、index	在添加一个新选项卡的时候触发
onUpdate	title、index	在更新一个选项卡面板的时候触发
onContextMenu	e、title、index	在右键点击一个选项卡的时候触发

4.方法列表：

方法名	参数	说明
options	none	返回选项卡属性
tabs	none	返回所有选项卡面板
resize	none	调整选项卡容器的大小和布局
add	options	添加一个新选项卡面板，参数是一个配置对象
close	which	关闭一个选项卡面板，which可以是选项卡面板的标题或索引
getTab	which	获取指定选项卡面板，which可以是选项卡面板的标题或索引
getTabIndex	tab	获取指定选项卡面板的索引
getSelected	none	获取选中的选项卡面板

5.选项卡面板继承了pannel面板的一些属性，以下是公共属性：

属性名	值	说明
id	string	选项卡面板的id属性
title	string	选项卡面板的标题文本，默认为空
content	string	选项卡面板的内容，默认为空
href	string	从url加载远程数据内容填充到选项卡面板
cache	boolean	如果为true，在href有效的时候缓存选项卡面板，默认true
iconCls	string	定义一个图标的css类id显示到选项卡面板标题，默认null
width	string	选项卡面板宽度。默认auto
height	number	选项卡面板高度。默认auto
collapsible	boolean	是否允许选项卡折叠。默认false

6.选项卡面板的独有属性：

属性名	值	说明
closable	boolean	设置为true时，选项卡面板将显示一个关闭按钮，默认false
selected	boolean	设置为true时，选项卡面板会被选中。默认false

第十一章、Accordion（分类）组件

1.该组件依赖于Panel面板组件。

2.属性列表：

属性名	值	说明
width	number	分类容器的高度，默认auto
height	number	分类容器的宽度，默认auto
fit	boolean	是否自适应父容器大小，默认false
border	boolean	是否显示边框，默认true
animate	boolean	在展开和折叠时是否产生动画效果，默认true
multiple	boolean	是否可以同时展开多个面板，默认false
selected	number	初始化时默认选中的面板的索引，默认0

3.事件列表：

事件名	传参	说明
onSelect	title\index	在面板被选中的时候触发
onUnselect	title\index	在面板被取消选中的时候触发
onAdd	title\index	在添加新面板的时候触发
onBeforeRemove	title\index	在移除面板前触发，返回false可取消移除操作
onRemove	title\index	在面板被移出时触发

4.方法列表：

方法名	参数	说明
options	none	返回分类组件的属性
panels	none	获取所有面板
resize	none	调整分类组件大小
getSlected	none	获取选中的面板
getSelections	none	获取所有选中的面板
getPanel	which	获取指定面板，which参数可以是面板的标题或索引
getPanelIndex	panel	获取指定面板的索引
select	which	选择指定面板，which参数可以是面板的标题或索引
unselect	which	取消选择指定面板，which参数可以是面板的标题或索引
add	options	添加一个新面板，在默认情况下新面板会变成当前面板。如果要添加一个非选中的面板需将selected属性设置为false
remove	which	移除指定面板，which参数可以是面板的标题或索引

5.分类组件面板也和选项卡面板一样继承了panel属性，参考前面的表。同时分类组件面板新增了两个属性：

属性名	值	说明
selected	boolean	如果设置为true将展开面板
coolapsible	boolean	如果设置为true将显示折叠按钮

第十二章 Layout（布局）组件

1.布局组件：该组件依赖于Panel面板组件和resizable调整大小组件，在系统的后台或者大型开发的页面架构中使用最多，使用该组件可以很好的布局整个页面。在使用该组件的时候主要采用class加载，js调用反而比较少用（在该布局组件中，使用一个总体的div作为整个架构整体，一般用5个子div分别代表上北、下南、左西、右东、中间，当然具体布局视情况而定）。

2.属性：该组件只有一个fit属性，设置为true时组件将自适应父容器，当使用body标签创建布局的时候，整个页面会自动最大，默认false。

3.区域面板属性：Layout的属性只有fit一个，它的区域面板属性与Panel组件类似：

属性名	值	说明
title	string	布局面板的标题文本。默认null
region	string	定义布局面板位置，可用值有：north\south\east\west\center。默认空
border	boolean	是否显示布局面板边框。默认true
split	boolean	是否可以通过分隔栏改变面板大小。默认false
iconCls	string	一个包含图标的css类id，该图标会显示到面板标题上。默认null
href	string	用于读取远程站点数据的url。默认null
collapsible	boolean	是否显示折叠按钮。默认true
minWidth	number	最小面板宽度。默认10
minHeight	number	最小面板高度。默认10
maxWidth	number	最大面板宽度。默认10000
maxHeight	number	最大面板高度。默认10000

4.方法列表：

方法名	参数	说明
resize	none	设置布局大小
panel	region	返回指定面板，可用值有：north\south\east\west\center
collapse	region	折叠指定面板，可用值有：north\south\east\west
expand	region	展开指定面板，可用值有：north\south\east\west
add	options	添加指定面板，可用值有：north\south\east\west
remove	region	移除指定面板，可用值有：north\south\east\west

第十三章、window（窗口）组件

1.该组件依赖于Panel面板组件、resize调整大小组件、draggable拖动组件，该组件是Panel组件的扩展，它的最大优势就是可以拖动、调整大小和内部布局。

2.属性列表：窗口属性扩展自Panel面板，窗口新增或重新定义的属性如下：

属性名	值	说明
title	string	窗口的标题文本，默认值为NewWindow
collapsible	boolean	是否显示可折叠按钮，默认true
minimizable	boolean	是否显示最小化按钮，默认true
maximizable	boolean	是否显示最大化按钮，默认true
closable	boolean	是否显示关闭按钮，默认true
closed	boolean	是否可以关闭窗口，默认false
zIndex	number	窗口z轴坐标，默认9000（绝对定位）
draggable	boolean	是否可以拖动窗口，默认true
resizable	boolean	是否能够改变窗口大小，默认true
shadow	boolean	是否显示窗体阴影，默认true
inline	boolean	定义如何布局窗口，如果设置为true，窗口将显示在他的父容器中，否则显示在所有元素上面，默认false
modal	boolean	是否显示为模式化窗口（背景幕布不能操作），默认true

3.事件列表：窗口的事件列表完全继承自Panel面板，直接参考Panel事件即可。

4.方法列表：窗口的方法列表扩展自Panel面板，窗口新增方法如下：

方法名	参数	说明
window	none	返回外部窗口对象
hcenter	none	仅水平居中窗口
vcenter	none	仅垂直居中窗口
center	none	将窗口绝对居中

5.window组件还可以进行内部布局和添加linkbutton，具体操作如下：外部用window组件包裹一下，内部用layout组件左右各分配一个，底部分配一个，底部添加一个按钮即可。

第十四章、Dialog（对话框）组件

1.Dialog组件依赖于window窗口组件和linkbutton组件，Dialog组件、Messager组件和window组件本质都是Panel组件，只是因为他们各自表达的语义不同而分为不同的组件。

2.属性列表：对话框窗口属性扩展自window窗口属性，他新增或重新定义的属性如下：

属性名	值	说明
title	string	对话框窗口标题文本，默认New Dialog
collapsible	boolean	是否显示可折叠按钮，默认false
minimizable	boolean	是否显示最小化按钮，默认false
maximizable	boolean	是否显示最大化按钮，默认false
resizable	boolean	是否可以改变对话框窗口大小，默认false
toolbar	array\selector	设置对话框窗口顶部的工具栏，可用值有：1、一个数组，每一个工具栏中的工具属性都和linkbutton相同。2、一个选择器指定工具栏，默认null
buttons	array\selector	设置对话框窗口底部按钮，可用值有：1、一个数组，每一个按钮的属性都和linkbutton相同。2、一个选择器指定按钮，默认null

3. 事件列表：Dialog的事件完全继承自Panel面板，参考Panel事件列表即可。

4.方法列表：Dialog对话框的方法扩展自window组件，他的新增方法如下：

方法名	参数	说明
dialog	none	返回外部对话框对象

第十五章、Messager（消息窗口）组件

1.Messager组件依赖于window组件、progressbar组件，消息窗口提供了不同的消息框风格，包含alert（警告框）、confirm（确认框）、prompt（提示框）、progress（进度条框）等，所有的消息框都是异步的，用户可以在交互消息之后使用回调函数去处理结果。（该组件没有class加载方式，只能js调用）。

2.属性列表：需要通过设置默认属性去设置。

属性名	值	说明
ok	string	确认按钮文本。默认Ok
cancel	string	取消按钮文本。默认Cancel

3.方法列表：这些方法的参数比较复杂，具体看视频。

方法名	参数	说明
$.messager.show	options	在屏幕右下角显示一条消息
$.messager.alert	title,msg,icon,fn	弹出警告框
$.messager.confirm	title,msg,fn	弹出确认框
$.messager.prompt	title,msg,fn	弹出提示框
$.messager.progress	options或method	显示进度条框

第十六章、Menu（菜单）组件

1.菜单项属性：

属性名	值	说明
id	string	菜单项id属性
text	string	菜单项文本
iconCls	string	显示在菜单项左侧16x16像素的css类id
href	string	设置点击菜单项时的页面位置
disabled	boolean	是否显示菜单项。默认false
onclick	function	在点击菜单项的时候调用的函数

2.菜单属性：

属性名	值	说明
zIndex	number	菜单z-index样式，默认110000
left	number	菜单的左边距。默认0
top	number	菜单的上边距。默认0
minWindth	number	菜单的最小宽度。默认120
hideOnUnhover	boolean	当设置为true时，鼠标离开菜单时将自动隐藏菜单。默认true

3.菜单方法：

方法	值	说明
options	none	返回属性对象
show	pos	显示菜单到指定的位置。pos参数有两个属性left和top
hide	none	隐藏菜单
destroy	none	销毁菜单
getItem	itemEI	获取指定的菜单项。得到的是一个菜单项的DOM元素
setText	param	设置指定菜单项的文本，param参数包含两个属性：target（DOM对象，要设置值的菜单项）、text（字符串，要设置的新文本值）。
setIcon	param	设置指定菜单项的图标，param参数包含两个属性：target（DOM对象，要设置值的菜单项）、iconCls（新的图标css类id）。
findItem	text	查找指定的菜单项，得到一个菜单项的DOM元素
appendItem	options	追加新的菜单项，options参数是新的菜单项属性，默认情况下添加的项在菜单项的顶部。追加一个子菜单项，则用parent属性指定父项元素。
removeItem	ItemEI	移除指定的菜单项。
enableItem	itemEI	启用菜单项
disableItem	itemEI	禁用菜单项

第十七章、MenuButton（菜单按钮）组件

1.该组件依赖于Menu组件和LinkButton组件。

2.属性列表：

属性名	值	说明
plain	boolean	为true时显示简易效果。默认false
menu	string	用来创建一个对应菜单的选择器
duration	number	鼠标滑过按钮时显示菜单所持续的时间，单位毫秒，默认100

3.方法列表：

方法名	参数	说明
options	none	返回属性对象
disable	none	禁用菜单按钮
enable	none	启用菜单按钮
destroy	none	销毁菜单按钮

第十八章、splitButton（分割按钮）组件

1.该组件依赖于Menu组件和LinkButton组件，他与MenuButton组件是一回事，只是多了个分隔符。

2.属性和方法与MenuButton相同。

第十九章、Pagination（分页）组件

1.该组件依赖于linkButton组件。

2.属性列表：

属性名	值	说明
total	number	总记录数，在分页控件创建时初始的值。默认1
pageSize	number	每页显示的条数。默认10
pageNumber	number	在分页控件创建时显示的页数。默认1
pageList	array	用户可以改变页面显示条数大小，pageList定义了页面导航展示的页码。默认[10,20,30,50]
loading	boolean	定义数据是否正在载入。默认false
buttons	array	自定义按钮，可用值：1、每个按钮都有两个属性iconCls（背景图片的css类id）和handler（按钮被点击时调用的函数）。2、页面已存在元素的选择器对象，默认null
layout	array	分页控件的布局定义，布局选项可以包含一个或多个值： 1、list：页面显示的条数列表 2、sep：页面按钮分割线 3、first：首页按钮 4、prev：上一页按钮 5、next：下一页按钮 6、last：尾页按钮 7、refresh：刷新按钮 8、manual：手动输入当前页的输入框 9、links：页面数链接
showPageList	boolean	是否显示页面导航列表
showRefresh	boolean	是否显示刷新按钮
beforePageText	string	在输入组件之前显示一个labe标签
afterPageText	string	在输入组件之后显示一个label标签
displayMsg	string	显示页面信息

3.事件列表：

事件名	传参	说明
onSelectPage	pageNumber\pageSize	用户选择一个新页面时触发，回调函数包含两个参数pageNumber（新的页数）、pageSize（每页显示条数）
onBeforeRefresh	pageNumber\pageSize	在点击刷新按钮之前触发，返回false可取消刷新操作
onRefresh	pageNumber\pageSize	点击刷新按钮之后触发
onChangePagesize	pageSize	在更改页面大小时触发

4.方法列表：

方法名	传参	说明
options	none	返回参数对象
loading	none	提醒分页控件正在加载中
loaded	none	提醒分页控件加载完成
refresh	options	刷新并显示分页栏信息
select	page	选择一个新页面，页面索引从1开始

第二十章、SearchBox（搜索框）组件

1.该组件依赖于MenuButton组件。

2.属性列表：

属性名	值	说明
width	number	搜索框宽度。默认auto
height	number	搜索框高度。默认22
prompt	string	在输入框中显示的提示信息。
value	string	在输入框中输入的值。
menu	selector	搜索类型菜单，每个菜单项都具备以下属性：name（搜索类型名称）、selected（自定义默认选中的搜索类型名称。默认null）
searcher	function(value,name)	在用户按下搜索按钮或回车键的时候调用的函数。默认null
disabled	boolean	是否禁用搜索框

3.方法列表：

方法名	参数	说明
options	none	返回属性对象
menu	none	返回搜索类型的菜单对象
textbox	none	返回文本框对象
getValue	none	返回当前搜索值
setValue	value	设置一个新的搜索值
getName	none	返回当前搜索类型名
selectName	name	选择当前搜索类型名
destroy	none	销毁该控件
resize	width	重置控件宽度
disable	none	禁用控件
enable	none	启用控件
clear	none	清理搜索框内容
reset	none	重置搜索框内容

第二十一章、ValidateBox（验证框）组件

1.该组件依赖于Tooltip组件，在之前的组件中都是用div标签作为加载对象，但该组件使用input标签作为对象（ <input class=”easyui-validatebox” data-options=”required:true”/>）。

2.属性列表：

属性名	值	说明
required	boolean	是否设置为必填字段。默认false
validType	string\array	设置字段的验证类型，比如email、url、length[0,100]、remote[‘url’,’paramname’]（服务器端验证）。默认null
delay	number	延迟到最后验证输入值的时间毫秒数。默认200
missingMessage	string	当文本框未填写时出现的提示信息。默认：This field is requred
invalidMessage	string	当文本框的内容被验证为无效时出现的提示。默认null
tipPosition	string	当前文本框内容无效时提示消息显示的位置。默认right
deltax	number	提示框在水平方向上的位移。默认0
novaliddate	boolean	为true时关闭验证功能。默认false

3.方法列表：

方法名	参数	说明
options	none	返回属性列表
destroy	none	移除并销毁组件
validate	none	验证文本框的内容是否有效
isValid	none	调用validate方法并返回验证结果，返回boolean类型
enableValidation	none	启用验证
disableValidation	none	禁用验证

4.自定义验证：我们可以重写默认规则的方式来创建一个新的规则：

$.extend(

$.fn.validatebox.defaults.rules, { 规则写在这里 }

);

第二十二章、Combo（自定义下拉框）组件

1.该组件依赖于验证框组件（在验证框的基础上增加一个下拉选择功能），它不能通过标签的方式创建，只能js调用。

2.属性列表：

属性名	值	说明
width	number	组件的宽度。默认auto
height	number	组件的高度。默认22
panelWidth	number	下拉面板宽度。默认null
panelHeight	number	下拉面板高度。默认200
multiple	boolean	是否支持多选。默认false
selectOnNavigation	boolean	是否允许使用键盘导航来选择项。默认true
separator	string	在多选的时候使用何种分隔符进行分割。默认“，”
editable	boolean	是否可以直接输入文字到字段中。默认true
disabled	boolean	设置启用\禁用字段。默认false
readonly	boolean	设置该字段为读写\只读模式。默认false
hasDownArray	boolean	是否显示向下箭头按钮。默认true
value	string	字段的默认值
delay	number	最后一次输入时间与执行搜索之间的时间间隔。默认200
keyHandler	object	在用户按下键的时候调用一个函数

3.方法列表：

方法名	传参	说明
options	none	返回属性对象
panel	none	返回下拉面板对象
textbox	none	返回文本框对象
destroy	none	销毁该控件
resize	width	调整组件宽度
showPanel	none	显示下拉面板
hidePanel	none	隐藏下拉面板
disable	none	禁用组件
enable	none	启用组件
readonly	mode	启用\禁用只读模式
validate	none	验证输入的值
isValid	none	返回验证结果
clear	none	清楚控件的值
reset	none	重置控件的值
getText	none	获取输入的文本
setText	text	设置输入的文本
getValues	none	获取组件值的数组
setValues	values	设置组件值的数组
getValue	none	获取组件的值
setValue	value	设置组件的值

4.事件列表：

事件名	事件属性	说明
onShowPanel	none	当下拉面板显示的时候触发
onHidePanel	none	当下拉面板隐藏的时候触发
onChange	newValue\oldValue	当字段值改变的时候触发

第二十三章、NumberBox（数值输入框）组件

1.该组件依赖于验证框组件，具有验证功能，只能输入数字。

2.属性列表：

属性名	值	说明
disabled	boolean	是否禁用该字段。默认false
value	number	默认值
min	number	允许的最小值。默认null
max	number	允许的最大值。默认null
precision	number	在小数点后显示的最大精度。
decimalSeparator	string	使用哪一种十进制字符分隔数字的整数和小数部分。默认“.“
groupSeparator	string	使用哪一种字符分隔整数，以显示成千上万的数据。
prefix	string	前缀字符。比如表示金额的￥或$
suffix	string	后缀字符。比如表示欧元的€
filter	function(e)	定义如何过滤按键，当返回true则允许输入，反之禁止
formatter	function(v)	用于格式化数值的函数，返回字符串值显示到输入框中
parser	function(s)	用于解析字符串的函数

3. 事件列表：

事件名	事件属性	说明
onChange	newvalue\oldvalue	当字段值更改的时候触发

4.方法列表：扩展自验证框组件

方法名	传参	说明
opstions	none	返回数值输入框属性
destroy	none	销毁数值输入框对象
disable	none	禁用字段
enable	none	启用字段
fix	none	将输入框中的值修正为有效的值
setValue	value	设置数值输入框的值
getValue	none	获取数值输入框的值
clear	none	清除数值输入框的值
reset	none	重置数值输入框的值

第二十四章、Calendar（日历）组件

1.属性列表：

属性名	值	说明
width	number	日历组件宽度。默认180
height	number	日历组件高度。默认180
fit	boolean	是否将日历组件大小自适应父容器。默认false
border	boolean	是否显示边框。默认true
firstDay	number	定义一周的第一天是星期几。0=星期日、1=星期一……
weeks	array	周列表内容。默认S\M\T\W\T\F\S
months	array	月列表内容。默认Jan\Feb\Mar\Apr\May\Jun\Jul\Aug\Sep\Oct\Nov\Dec
year	number	年日历。
month	number	月日历
current	date	当前日期
formatter	date	格式化日期
styler	date	设置指定日期样式
validator	date	设置指定日期是否可以选择

2.事件列表：

事件名	事件属性	说明
onSelect	date	在用户选择日期的时候触发
onChange	newDate\oldDate	在用户改变选择日期的时候触发

3.方法列表：

方法名	传参	说明
options	none	返回属性对象
resize	none	调整日历大小
moveTo	date	跳转日历到指定日期

第二十五章、DateBox（日期输入框）组件

1.该组件依赖于Combo组件和Calendar组件。

2.属性列表：

属性名	值	说明
panelWidth	number	下拉日历面板宽度。默认180
panelHeight	number	下拉日历面板高度。默认auto
currentText	string	显示当天按钮。默认Today
closeText	string	显示关闭按钮。默认Close
okText	string	显示OK按钮。默认OK
disabled	boolean	是否禁用字段。默认false
buttons	array	在日历下面的按钮
sharedCalendar	string\selector	将一个日历控件共享给多个datebox控件使用。默认null
formatter	function	该函数用于格式化日期，他有一个date参数并且会返回一个字符串类型的值。
parser	function	该函数用于解析一个日期字符串，他有一个date参数并且会返回一个日期类型的值

3.事件列表：

事件名	事件属性	说明
onSelect	date	在用户选择日期的时候触发

4.方法列表：

方法名	传参	说明
options	none	返回属性对象
calendar	none	返回日历对象
setValue	value	设置输入的日期值

第二十六章、Spinner（微调）组件

1.该组件依赖于ValidateBox组件，它是后面两款高级微调组件的基础组件，默认情况下无法微调，该组件不支持class加载方式。

2.属性列表：扩展自ValidateBox组件

属性名	值	说明
width	number	组件宽度。默认auto
height	number	组件高度。默认22
value	string	默认值
min	string	允许的最小值。默认null
max	string	允许的最大值。默认null
increment	number	在点击微调按钮的时候的增量值。默认1
editable	boolean	用户是否可以直接输入值到字段。默认true
disabled	boolean	是否禁用字段。默认false
spin	function(down)	在用户点击微调按钮的时候调用的函数（主要用于判断用户点击的是向上按钮还是向下按钮）。down参数对应用户点击的按钮的返回值（点击向上返回false，点击向下返回true）

3.事件列表：

事件名	事件属性	说明
onSpinUp	none	在用户点击向上微调按钮的时候触发
onSpinDown	none	在用户点击向下微调按钮的时候触发

4.方法列表：扩展自ValidateBox组件

方法名	传参	说明
options	none	返回属性对象
destroy	none	销毁微调组件
resize	width	返回组件宽度
enable	none	启用组件
disable	none	禁用组件
getValue	none	获取组件值
setValue	value	设置组件值
clear	none	清空组件值
reset	none	重置组件值

第二十七章、NumberSpinner（数字微调）组件

1.该组件完全继承自Spiner组件，本身没有属性、事件和方法，用于对数字进行微调。

第二十八章、TimeSpinner（时间微调）组件

1.该组件同样依赖于Spiner组件，用于对时间进行微调。

2.属性列表：

属性名	值	说明
separator	string	定义在小数、分钟、秒钟之间的分隔符。默认:
showSeconds	boolean	是否显示秒钟信息。默认false
highlight	number	初始选中的字段，0=小时，1=分钟，2=秒钟，认为0

3.方法列表：

方法名	传参	说明
options	none	返回属性对象
setValue	value	设置时间微调组件的值
getHours	none	获取当前小时数
getMinutes	none	获取当前分钟数
getSeconds	none	获取当前的秒数

第二十九章、DateTimeBox（日期时间输入框）组件

1.该组件依赖于DateBox组件（用于选择日期）和TimeSpinner组件（用于微调时间）。

2.属性列表：扩展自DateBox组件

属性名	值	说明
showSeconds	boolean	是否显示秒钟信息。默认false
timeSeparator	String	定义在小时、分钟、秒钟之间的分割符。默认：

3.方法列表：扩展自DateBox组件

方法名	传参	说明
options	none	返回属性对象
setValue	value	设置日期时间输入框的值
spinner	none	返回时间微调组件对象

第三十章、Slider（滑动条）组件

1.该组件依赖于Draggable组件。

2.属性列表：

属性名	值	说明
width	number	滑动条宽度（mode为h时有效）。默认auto
height	number	滑动条高度（mode为v时有效）。默认auto
mode	string	声明滑动条的类型，可用值：h（水平）、v（垂直）。默认h
reversed	boolean	设置为true时，对调最大值和最小值的位置。默认false
showTip	boolean	是否显示信息提示。默认false
disabled	boolean	是否禁用滑动条。默认false
value	number	滑动条默认值，默认0
min	number	允许最小值。默认0
max	number	允许的最大值。默认100
step	number	值增或减少的步长。默认1
rule	array	显示滑动条的标尺，数组中的值将在滑动条上标记出来
tipFormatter	function	该函数用于格式化滑动条。返回的字符串值将显示提示

3.事件列表：

事件名	传参	说明
onChange	newvalue\oldvalue	在滑动过程中值更改时触发
onSlideStart	value	开始拖动滑块时触发
onSlideEnd	value	结束拖动滑块时触发

4.方法列表：

方法名	传参	说明
opations	none	返回滑动条属性
destroy	none	销毁滑动条对象
resize	param	设置滑动条大小。param包含width（新宽度）、height（新高度）
getValue	none	获取滑动条的值
setValue	value	设置滑动条的值
clear	none	清除滑动条的值
reset	none	重置滑动条的值
enable	none	启用滑动条控件
disable	none	禁用滑动条控件

第三十一章、Form（表单）组件

1.表单组件只能在js中设置，首先需要在页面上创建一张表单：

2.属性列表：

属性名	值	说明
url	string	提交表单所到的url地址（也就是form的action属性地址）

3.事件列表：

事件名	参数	说明
onSubmit	param	提交之前触发，返回false可终止提交操作
success	data	提交成功之后触发
onBeforeLoad	param	在请求加载数据之前触发。返回false可终止数据请求
onLoadSuccess	data	在表单数据加载完成后触发
onLoadError	none	在表单数据加载出现错误的时候触发

4.方法列表：

方法名	传参	说明
submit	options	执行提交操作，该选项的参数是一个对象
load	data	读取记录填充到表单中
clear	none	清除表单数据
reset	none	重置表单数据
validate	none	做表单字段验证，当所有字段都有效的时候返回true，该方法使用validatebox（验证框）插件
enableValidation	none	启用验证
disableValidation	none	禁用验证

第三十二章、DataGrid（数据表格）组件

1.DataGrid组件以表格的形式展示数据，并提供了丰富的选择、排序、分组、编辑数据的功能，该组件依赖于Panel组件、Resizeable组件、LinkButton组件、Pageination组件。

2.class加载：需要将table的头部和主体写全，而且还要写属性触发才能体现出来，如下：

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>xiaoxin@163.com</td>

</tr>

</tbody>

</table>

3.属性列表：扩展自Panel组件

属性名	值	说明
url	string	从远程请求数据。默认null
columns	array	DataGrid列配置对象（见列属性），默认值为undefined
pagination	boolean	是否显示分页工具栏。默认false
pageNumber	number	设置分页时初始化显示的页码。默认null
pageSize	number	设置分页时每页显示的条数。默认10
pageList	array	设置分页时初始化条数选择大小，默认[10,20,30,40,50]
pagePosition	string	设置分页工具栏的位置。默认bottom
sortName	string	设置哪些列可以进行排序。默认null
sortOrder	string	设置列排序的顺序，asc和desc，默认asc
multisport	boolean	设置是否允许多列排序，默认false
remoteSort	boolean	设置服务器对数据进行排序。默认true
method	string	设置请求远程数据方式，默认post
queryParams	object	设置请求远程数据时发送的额外数据，默认null
striped	boolean	是否显示斑马线效果。默认false
nowrap	boolean	是否在一行显示所有数据。默认true
fitColumns	boolean	是否自动展开或收缩，以达到自适应。默认false
data	array\objcet	手动加载数据。默认null
loadMsg	string	从远处加载数据时显示的提示消息
rownumbers	boolean	是否显示行号。默认false
singleSelect	boolean	是否只能选定一行。默认false
showHeader	boolean	是否显示行头。默认true
showFooter	boolean	是否显示行尾。默认false
scrollbarSize	number	滚动条所占的宽高度。默认18
rowStyler	function	参数:index索引\row对象，可以通过return返回选定行样式
toolbar	Array\selector	顶部工具栏的DataGrid面板。可能的值：1、数组，每个工具属性都和linkbutton一样。2、选择器指定的工具栏
editors	object	定义在编辑行的时候使用的编辑器
fitColumns	boolean	是否收缩列的大小，以适应网页的宽度，防止水平滚动
frozenClolumns	array	同列属性，这些列会被冻结在左侧。

4.columns列属性：

属性名	值	说明
title	string	列标题名称。默认undefined
field	string	列字段名称。默认undefined
width	number	列的宽度。没有设置则自适应。默认undefined
sortable	boolean	设置为true，则可以点击排序。默认undefined
order	string	点击排序的默认，asc或desc，默认undefined
sorter	Function	自定义排序，接受a，b两个值
align	string	对齐列数据。有left\center\right三种。默认undefined
halign	string	对齐标题。有left\center\right三种。默认undefined
resizable	boolean	设置为true，则允许改变大小
fixed	boolean	设置为true，则阻止自适应
hidden	boolean	设置为true，则隐藏列
formatter	function	单元格格式化函数，接受三个参数:value值\row对象\index索引
styler	function	单元格样式设定，接受三个参数:value值\row对象\index索引
editor	string\object	指明编辑类型。（视频第38集）
checkbox	boolean	如果为true，则显示复选框

5.方法列表：

方法名	参数	说明
load	param	加载和显示第一页的所有行。如果指定了param，它将取代queryParams属性。
appendRow	row	追加一个新行。添加到末尾
insertRow	row	插入一个新行。参数包括index要插入的行索引。
deleteRow	index	删除指定行
beginEdit	index	开始编辑行
endEdit	index	结束编辑行
cancelEdit	index	取消编辑行
rejectChanges	none	回滚所有创建或上一次调用acceptChanges函数后更改的数据
unselectRow	index	取消指定选择的行
loading	none	显示载入状态
loaded	none	隐藏载入状态
unselectAll	none	取消所有当前页中的所有行
getchanges	type	从上一次提交开始获取改变的所有行。参数指明用哪些类型改变的行。可用值：inserted\deleted\updated，未配置时返回所有行
resize	param	做调整和布局
options	none	返回属性对象
getPager	none	返回页面对象
getPanel	none	返回面板对象
getColumnOption	field	返回指定列属性
getColumnFields	frozen	返回列字段。如果frozen属性为true，将返回固定列字段名
fixRowHeight	index	固定指定列高度。如果index未配置，则所有行高度都固定
fitColumns	none	使列自动展开\收缩到合适的宽度
fixColumnSize	field	固定列大小。如果field为配置，则所有列大小都固定
reloadFooter	footer	重载页脚行
reload	param	重载行。等同于load方法，但他将保持在当前页
freezeRow	index	冻结指定行，当表格向下滚动的时候始终保持被冻结的行显示在顶部
autoSizeColumn	field	自动调整列宽度以适应内容
loadData	data	加载本地数据，旧的行将被移除
getData	none	返回加载完毕后的数据
getRows	none	返回当前页的所有行
getRowIndex	row	返回指定行的索引，该行的参数可以使一行记录或id字段值
getFooterRows	none	返回页脚行
getChecked	none	在复选框被选中的时候返回所有行
getSelected	none	返回第一个被选中的行，如果没有选中的行则返回null
getSelections	none	返回所有被选中的行，如没有记录被选中则返回空数组
getEditor	options	获取指定编辑器
clearSelections	none	清除所有选中行
clearChecked	none	清除所有勾选行
scrollTo	index	滚动到指定行
highlightRow	index	高亮一行
selectAll	none	选择当前页中所有行
unselectAll	none	取消选择所有当前页选中的行
selectRow	index	选择一行
selectRecord	idValue	通过id值参数选择一行
unselectRow	index	取消选择一行
checkedAll	none	勾选当前页中所有行
uncheckedAll	none	取消勾选当前页中所有行
refreshRow	index	刷新行
validateRow	index	验证指定的行，有效时返回true
updateRow	param	更新指定行
acceptChanges	none	提交所有从加载或上一次调用该函数后更改的数据
showColumn	field	显示指定的列
hideColumn	field	隐藏指定的列
mergeCells	options	合并单元格，options包含以下属性：index行索引\field字段名称\rowspan合并的行数\colspan合并的列数

6.Editor编辑器属性：

属性名	值	说明
init	container\options	初始化编辑器并返回目标对象
destroy	target	如果有必要，则销毁编辑器
getValue	target	从编辑器中获取值
setValue	target\value	向编辑器中写入值
resize	target\width	如果有必要，则调整编辑器大小

7.事件列表：

属性名	值	说明
onDbclickRow	rowIndex\rowData	用户双击一行的时候触发，参数包括：点击的行的索引index、点击的行的记录rowData
onHeaderContextMenu	e\filed	在鼠标右击DataGrid表格头的时候触发
onRowContextMenu	rowIndex\rowData	在鼠标右击一行记录的时候触发
onLoadSuccess	data	在数据加载成功的时候触发
onLoadError	none	在载入远程数据错误的时候触发
onBeforeLoad	param	请求远程数据之前触发，返回false可终止操作
onClickRow	rowIndex\rowData	在用户点击一行的时候触发，参数包括点击行的索引index\点击行的记录rowData
onClickCell	rowIndex\field\value	用户点击单元格的时候触发
onDbClickCell	rowIndex\field\value	用户双击单元格的时候触发
onSortColumn	sort\order	在用户排序一列的时候触发，参数包括排序列字段名称sort\排序顺序order
onResizeColumn	field\width	在用户调整列大小的时候触发
onSelect	rowIndex\rowData	用户选择一行的时候触发，参数包括选择行的索引index\选择行的记录rowData
onunselect	rowIndex\rowData	用户取消选择一行的时候触发，参数包括选取消择行的索引index\取消选择行的记录rowData
onSelectAll	rows	用户选择所有行的时候触发
onUnselectAll	rows	用户取消选择所有行的时候触发
onCheck	rowIndex\rowData	用户勾选一行的时候触发，参数包括勾选行的索引index\勾选行的记录rowData
onUncheck	rowIndex\rowData	用户取消勾选行的索引index\取消勾选行的记录rowData
onCheckAll	rows	用户勾选所有行的时候触发
onuncheckedAll	rows	用户取消勾选所有行的时候触发
onBeforeEdit	rowsIndex\rowData	在用户开始编辑一行的时候触发，参数包括编辑行的索引index\编辑行的记录rowData
onAfterEdit	rowsIndex\rowData\ changes	在用户完成编辑一行的时候触发，参数包括编辑行的索引index\编辑行的记录rowData\ 更改后的字段changes
onCancelEdit	rowIndex\rowData	在用户取消编辑一行的时候触发，参数包括编辑行的索引index\编辑行的记录rowData

第三十三章、ComboBox（下拉列表框）组件

1.该组件依赖于Combo组件，class加载使用select标签作为加载对象。js加载直接使用input元素作为加载对象。

2.属性列表：

属性名	值	说明
valueField	string	基础数据值名称绑定到该下拉列表框。默认value
textField	string	基础数据字段名称绑定到该下拉列表框。默认text
groupField	string	指定分组的字段名称。默认null
groupFormatter	function(group)	返回格式化后的分组标题文本，以显示分组项
mode	string	定义了当文本改变时如何读取列表数据。设置为remote时，下拉列表框将会从服务器加载数据。当设置为remote模式时，用户输入的数据将被发送到名为q的http请求参数，然后到服务器检索新数据
url	string	通过url加载远程列表数据
method	string	HTTP方法检索数据（post\get）
data	array	数据列表加载
filter	function	定义当mode设置为local时如何过滤本地数据，函数有两个参数：用户输入的文本q\列表行数据row
formatter	function	定义如何渲染行。该函数接受一个参数：row
loader	function(param,success,error)	定义了如何从远程服务器加载数据，返回false可忽略该动作。param：传递到远程服务器的参数对象。success（data）：在检索数据成功时调用该回调函数。
loadFilter	function(data)	返回过滤后的数据并显示

3.事件列表：

事件名	参数	说明
onBeforeLoad	param	在请求加载数据前出发，返回false可取消该加载动作
onLoadSuccss	none	在加载远程数据成功的时候触发
onLoadError	none	在加载远程数据失败的时候触发
onSelect	record	在用户选择列表项的时候触发
onUnselect	record	在用户取消选择列表项的时候触发

4.方法列表：

方法名	参数	说明
options	none	返回属性对象
getData	none	返回加载数据
loadData	data	读取本地列表数据
reload	url	请求远程列表数据。
setValues	values	设置下拉列表框数组
setValue	value	设置下拉列表框的值
clear	none	清楚下拉列表框的值
select	value	选择指定项
unselect	value	取消选择指定项

第三十四章、ComboGrid（数据表格下拉框）组件

1.该组件依赖于Combo组件和DataGrid组件。

2.属性列表：

属性名	值	说明
loadMsg	string	在数据表格加载的时候显示的提示消息。
idField	string	ID字段名称。
textField	string	要显示在文本框的文本字段。
mode	string	定义在文本改变的时候如何读取网格数据。设置为remote，则表格将从远程服务器读取。当设置为remote模式时，用户输入的数据将被发送到名为q的http请求参数，然后到服务器检索新数据
filter	function(q,row)	定义在mode设置为local的时候如何选择本地数据，返回true时则选择该行

3.事件列表：他的事件完全继承自combo组件和datagrid组件。

4.方法列表：

方法名	参数	说明
options	none	返回属性对象
grid	none	返回数据表格对象
setValues	values	设置组件值数组
setValue	value	设置组件值
clear	none	清楚组件的值

第三十五章、PropertyGrid（属性表格）组件

1.该组件依赖于DataGrid组件，用于以键值对的形式显示数据（显示属性名和属性值），以table标签为加载对象。

2.属性表格的属性扩展自datagrid组件，其新增的属性如下：

属性名	值	说明
showGroup	boolean	是否显示属性分组。默认false
groupField	string	定义分组的字段名。默认group
groupFormatter	function(group,rows)	定义如何格式化分组的值。group：分组字段值，rows：属于该分组的所有行

3.方法列表：

方法名	参数	说明
expandGroup	groupIndex	展开指定分组。若未指定参数，则默认展开所有分组
collapseGroup	groupIndex	折叠指定分组。若未指定参数，则默认折叠所有分组

第三十六章、Tree（树）组件

1.该组件依赖于Draggable组件、Droppable组件，使用ul标签作为加载对象，通过层层嵌套形成目录。

2.属性列表：

属性名	值	说明
url	string	检索远程数据的url地址
method	string	检索数据的http方法（post\get）
animate	boolean	在展开或折叠节点的时候是否具有动画效果
checkbox	boolean	是否在每个节点之前都显示复选框
cascadeCheck	boolean	是否关联子父节点选中状态
onlyLeafCheck	boolean	是否只在末级节点之前显示复选框
lines	boolean	是否显示数组件上的虚线
dnd	boolean	是否启用拖拽功能
data	array	本地节点数据加载
formatter	function(node)	定义如何渲染节点的文本
loader	function(param,success,error)	定于如何从远程加载数据
loadFilter	function(data,parent)	返回过滤过的数据进行显示，返回数据是标准数格式，该函数有两个参数：加载的原始数据data\DOM对象parent
checked	boolean	默认是否选中该节点

3.异步加载：如果想从数据库里获取导航内容，就必须实现一张父类子类的无限极分类表，主要有id（编号）、text（名称）、state（状态）、tid（类别）等字段，通过递归的方式显示到前台树导航目录中（内部已实现点击目录展开节点的事件）。

4.事件列表：

事件名	参数	说明
onClick	node	在用户点击一个节点的时候触发
onDblclick	node	在用户双击一个节点的时候触发
onBeforeLoad	node,param	在请求加载远程数据之前触发，返回false可取消加载操作
onLoadSuccess	node,data	在数据加载成功以后触发
onLoadError	arguments	在数据加载错误的情况下触发
onBeforeExpand	node	在节点展开之前触发，返回false可取消展开
onExpand	node	在展开节点的时候触发
onBeforeCollapse	node	在折叠节点之前触发，返回false可取消该操作
onCollapse	node	在折叠节点的时候触发
onBeforeCheck	node,checked	用户勾选节点复选框之前触发，返回false可取消该操作
onCheck	node,checked	在用户勾选复选框的时候触发
onBeforeSelect	node	在用户选择一个节点之前触发，返回false可取消该操作
onSelect	node	在用户选择节点的时候触发
onContextMenu	e,node	在右击节点的时候触发
onBeforeDrag	node	在开始拖动节点之前触发，返回false可阻止拖动
onStartDrag	node	在开始拖动节点的时候触发
onStopDrag	node	在停止拖动节点的时候触发
onDragEnter	target,source	拖动节点到目标节点并释放的时候触发
onDragOver	target,source	拖动节点经过某个目标节点并释放的时候触发，返回false可以阻止拖动
onDragLeave	target,source	拖动节点离开某个目标节点并释放的时候触发，返回false可以阻止拖动
onBeforeDrap	target,source ,point	在拖动节点之前触发，返回false可阻止拖动，point表示哪一种拖动操作（可用值：append，top，bottom）
onBeforeEdit	node	在编辑节点之前触发
onAfterEdit	node	在编辑节点之后触发
onCancelEdit	node	在取消编辑操作的时候触发

5.tree事件列表的node参数：很多事件的回调函数都包含node参数，其具备如下属性：

id	绑定节点的标识值
text	显示的节点文本
iconCls	显示的节点图标css类id
checked	该节点是否被选中
state	节点装套，open或closed
attributes	绑定该节点的自定义属性
target	目标DOM对象

6.方法列表：

方法名	参数	说明
options	none	返回树控件属性
loadData	data	读取树控件数据
getNode	target	获取指定节点对象
getData	target	获取指定节点数据，包含子节点
reload	target	重新载入树控件数据
getRoot	none	获取根节点，返回节点对象
getRoots	none	获取所有根节点，返回节点数组
getParent	target	获取父节点
getChildren	target	获取所有子节点
getChecked	state	获取所有指定状态节点（state值：checked\unchecked\indeterminate）
getSelected	none	获取选中节点并返回它，若无选中节点则返回null
isLeaf	target	判断指定节点是否是叶子节点
find	id	查找指定节点并返回节点对象
select	target	选择一个节点
check	target	选中指定节点
uncheck	target	取消选中节点
collapse	target	折叠一个节点
expand	target	展开一个节点（在没有子节点或节点关闭的时候，节点id值会发送给服务器请求子节点数据）
collspseAll	target	折叠所有节点
expandAll	target	展开所有节点
expandTo	target	打开从根节点到指定节点之间的所有节点
scrollTo	target	滚动到指定节点
append	param	追加若干子节点到一个父节点，param有两个属性：父节点parent\子节点数据data
toggle	target	打开或关闭节点的触发器
insert	param	在指定节点之前或之后插入节点，param包如下属性：在之前插入before\在之后插入after\节点数据data
remove	target	移除一个节点和他的子节点
pop	target	移除一个节点和他的子节点，并返回被移出的节点数据
update	param	更新指定节点
enableDnd	none	启用拖拽功能
disableDnd	none	禁用拖拽功能
endEdit	target	结束编辑节点
beginEdit	target	开始编辑节点
cancelEdit	target	取消编辑节点

第三十七章、ComboTree（树形下拉框）组件

1.该组件依赖于Combo组件和Tree组件。

2.属性列表：

属性名	值	说明
editable	boolean	定义用户是否可以直接输入文本到字段中。默认false

3.方法列表：

方法名	参数	说明
options	none	返回属性对象
tree	none	返回树形对象
loadData	data	读取本地树形数据
reload	url	再次请求远程树数据
clear	none	清空控件的值
setValues	values	设置组件值数组
setValue	value	设置组件值

第三十八章、TreeGrid（树形表格）组件

1.该组件依赖于DataGrid组件，他是Tree组件和DataGrid组件的结合体。

2.属性列表：它的属性、事件和方法全部扩展自DataGrid组件和Tree组件。新增属性如下：

属性名	值	说明
idField	string	定义关键字段来标识树节点
treeField	string	定义树节点字段

这篇关于jQueryEsayUI基础的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQueryEsayUI基础

第一章、Jquery Easy UI入门

第二章、使用EasyUI

第三章、Draggable（拖动）组件

第四章、Droppable（放置）组件

第五章、Resizable（调整大小）组件

第六章、Tooltip（提示框）组件

第七章、LinkButton（按钮）组件

第八章、ProgressBar（进度条）组件

第九章、Panel（面板）组件

第十章、Tabs（选项卡）组件

第十一章、Accordion（分类）组件

第十二章 Layout（布局）组件

第十三章、window（窗口）组件

第十四章、Dialog（对话框）组件

第十五章、Messager（消息窗口）组件

第十六章、Menu（菜单）组件

第十七章、MenuButton（菜单按钮）组件

第十八章、splitButton（分割按钮）组件

第十九章、Pagination（分页）组件

第二十章、SearchBox（搜索框）组件

第二十一章、ValidateBox（验证框）组件

第二十二章、Combo（自定义下拉框）组件

第二十三章、NumberBox（数值输入框）组件

第二十四章、Calendar（日历）组件

第二十五章、DateBox（日期输入框）组件

第二十六章、Spinner（微调）组件

第二十七章、NumberSpinner（数字微调）组件

第二十八章、TimeSpinner（时间微调）组件

第二十九章、DateTimeBox（日期时间输入框）组件

第三十章、Slider（滑动条）组件

第三十一章、Form（表单）组件

第三十二章、DataGrid（数据表格）组件

第三十三章、ComboBox（下拉列表框）组件

第三十四章、ComboGrid（数据表格下拉框）组件

第三十五章、PropertyGrid（属性表格）组件

第三十六章、Tree（树）组件

第三十七章、ComboTree（树形下拉框）组件

第三十八章、TreeGrid（树形表格）组件

相关编程文章