jQuery教程

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中设置,首先需要在页面上创建一张表单:

     <form id=”box”  method=”post“  name=”name“ ></form>  

  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的头部和主体写全,而且还要写属性触发才能体现出来,如下:

     <table  class=”easyui-datagrid“>

       <thead>

         <tr>

            <th data-options=”field:‘user’ “>账号</th>

            <th data-options=”field:‘email’ “>邮件</th>

            <th data-options=”field:‘date’ “>注册时间</th>

</tr>

       </thead>

       <tbody>

          <tr>

           <td>蜡笔小新</td>

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

           <td>2015-12-4</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基础的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!