jQuery EasyUI

easyui help you build your web page easily!

Documentation

Base

o o o o
Layout

EasyLoader Draggable Droppable Resizable

o o o o

Panel Tabs Accordion Layout

Menu and Button

o o o o
Form

Menu LinkButton MenuButton SplitButton

o o o o o o o

Form ComboBox ComboTree NumberBox ValidateBox DateBox Calendar

Windows

o o o

Window Dialog Messager

DataGrid and Tree

o o o

Pagination DataGrid Tree

EasyLoader

Usage
easyloader.base = '../'; // set the easyui base directory easyloader.load('messager', function(){ // load the specified module $.messager.alert('Title', 'load ok'); });

Options
Properties
Name Type Description Default

modules

object

Predefined modules.

locales

object

Predefined locales.

base

string

The easyui base directory, must end with '/'.

The base directory will be auto setted relative to easyload.js

The name of theme that theme string defined in 'themes' directory default

css

boolean

Defines if loading css file when loading module

true

locale

string

The locale name

null

timeout

number

Timeout value in milliseconds. Fires if a

2000

timeout occurs.

Defined locales

af bg ca cs da de en fr nl zh_CN zh_TW

Events
Name Parameters Description

onProgress

name

Fires when a module is loaded successfully.

onLoad

name

Fires when a module and it's dependencies are loaded successfully.

Methods
Name Parameter Description

Load the specified module. When load success a callback function will be called. load module, callback The module parameter valid type are: a single module name an module array a css file that end with '.css' a js file that end with '.js'

Draggable

Usage
Markup
<div id="dd" style="width:100px;height:100px;border:1px solid #ccc;"> <div id="title" style="background:#ccc;">title</div> </div>

jQuery
$('#dd').draggable(options);

Options
Override defaults with $.fn.draggable.defaults.

Properties
Name Type Description Default

A proxy element to be used when proxy string,function dragging, when set to 'clone', a clone element is used as proxy. If a function is specified, it must return a jQuery object. null

revert

boolean

If set to true, the element will return to its start position when dragging stops.

false

cursor

string

The css cursor when dragging.

move

deltaX

number

The dragged element position x corresponding to current cursor

null

deltaY

number

The dragged element position y corresponding to current cursor

null

handle

selector

The handle that start the draggable.

null

disabled

boolean

True to stop draggable.

false

edge

number

The drag width in which can start draggable.

Defines the axis which the dragged axis string elements moves on, available value is 'v' or 'h', when set to null will move across 'v' and 'h' direction. null

Events
Name Parameters Description

onStartDrag

Fires when the target object start dragging.

onDrag

Fires during dragging. Return false will not do dragging actually.

onStopDrag

Fires when the dragging stops.

Methods
Name Parameter Description

options

none

Return the options property.

proxy

none

Return the drag proxy if the proxy property is setted.

enable

none

Enable the drag action.

disable

none

Disable the drag action.

Droppable

Usage
Markup
<div id="dd" style="width:100px;height:100px;border:1px solid #ccc;"></div>

jQuery
$('#dd').droppable(options);

Options
Override defaults with $.fn.droppable.defaults

Properties
Name Type Description Determine which draggable element will be accepted Default

accept

selector

null

Events
Name Parameters Description

Fires when the draggable element is dragged onDragEnter e,source enter. The source parameter indicate the dragged DOM element.

Fires when the draggable element is dragged over. onDragOver e,source The source parameter indicate the dragged DOM element.

Fires when the draggable element is dragged onDragLeave e,source leave. The source parameter indicate the dragged DOM element.

Fires when the draggable element is dropped. The onDrop e,source source parameter indicate the dragged DOM element.

Resizable

Usage
Markup
<div id="rr" style="width:100px;height:100px;border:1px solid #ccc;"></div>

jQuery
$('#rr').resizable(options);

Options
Override defaults with $.fn.resizable.defaults.

Properties
Name Type Description Default

disabled

boolean

True to disable resizing.

false

handles

string

Indicate the direction of resizable,'n' is the north,'e' is the east,etc.

n, e, s, w, ne, se, sw, nw, all

minWidth

number

The minimum width when resizing.

10

minHeight

number

The minimum height when resizing.

10

maxWidth

number

The maximum width when resizing.

10000

maxHeight

number

The maximum height when resizing.

10000

edge

number

The edge of border to be resized.

Events
Name Parameters Description

onStartResize

Fires when start resizing.

onResize

Fires during resizing. When return false, the DOM element will not acts actual resize action.

onStopResize

Firest when stop resizing.

Panel

Usage
Markup
Many panel properties can be defined in <div/> markup.

<div id="p" title="My Panel" collapsible="true" style="padding:10px;"> Panel Content </div>

jQuery
To create a panel

$('#p').panel(options);
To create a panel with custom tools

$('#p').panel({ title: 'My Panel', tools: [{ iconCls:'icon-new', handler:function(){alert('new')} },{ iconCls:'icon-save' handler:function(){alert('save')} }] });
To move panel to other position

$('#p').panel('move',{ left:100, top:100 });

Dependencies

none

Options
Override defaults with $.fn.panel.defaults.

Properties
Name Type Description Default

title

string

The title text to display in panel header.

null

iconCls

string

A CSS class to display a 16x16 icon in panel.

null

width

number

Set the panel width.

auto

height

number

Set the panel height.

auto

left

number

Set the panel left position.

null

top

number

Set the panel top position.

null

cls

string

Add a CSS class to the panel.

null

headerCls

string

Add a CSS class to the panel header.

null

bodyCls

string

Add a CSS class to the panel body.

null

style

object

Add a custom specification style to the panel.

{}

fit

boolean

When true to set the panel size fit it's parent container.

false

border

boolean

Defines if to show panel border.

true

doSize

boolean

If set to true,the panel will be resize and do layout when created.

true

noheader

boolean

If set to true, the panel header will not be created.

false

content

string

The panel body content.

null

collapsible

boolean

Defines if to show collapsible button.

false

minimizable

boolean

Defines if to show minimizable button.

false

maximizable

boolean

Defines if to show maximizable button.

false

closable

boolean

Defines if to show closable button.

false

tools

array

Custom tools, every tool can contain two properties: iconCls and handler

[]

collapsed

boolean

Defines if the panel is collapsed at initialization.

false

minimized

boolean

Defines if the panel is minimized at initialization.

false

maximized

boolean

Defines if the panel is maximized at initialization.

false

closed

boolean

Defines if the panel is closed at initialization.

false

href

string

A URL to load remote data and then display in the panel.

null

cache

boolean

True to cache the panel content that loaded from href.

true

loadingMessage

string

When loading remote data show a message in the panel.

Loading

Events
Name Parameters Description

onLoad

none

Fires when remote data is loaded.

onBeforeOpen

none

Fires before panel is opened, return false to stop the open.

onOpen

none

Fires after panel is opened.

onBeforeClose

none

Fires before panel is closed, return false to cancel the close.

onClose

none

Fires after panel is closed.

onBeforeDestroy

none

Fires before panel is destroyed, return false to cancel the destroy.

onDestroy

none

Fires after panel is destroyed.

onBeforeCollapse

none

Fires before panel is collapsed, return false to stop the collapse.

onCollapse

none

Fires after panel is collpased.

onBeforeExpand

none

Fires before panel is expanded, return false to stop the expand.

onExpand

none

Fires after panel is expanded.

Fires after panel is resized. onResize width, height width: the new outer width height: the new outer height

Fires after panel is moved. onMove left,top left: the new left postion top: the new top position

onMaximize

none

Fires after the window has been maximized.

onRestore

none

Fires after the window has been restored to its original size.

onMinimize

none

Fires after the window has been minimized.

Methods
Name Parameter Description

options

none

Return options property.

panel

none

Return the panel object.

header

none

Return the panel header object.

body

none

Return the panel body object.

setTitle

title

Set the title text of header.

open

forceOpen

When forceOpen parameter set to true, the panel is opened bypass the onBeforeOpen callback.

close

forceClose

When forceClose parameter set to true, the panel is closed bypass the onBeforeClose callback.

destroy

forceDestroy

When forceDestroy parameter set to true, the panel is destroyed bypass the onBeforeDestroy callback.

refresh

none

Refresh the panel to load remote data when href property is setted.

Set panel size and do layout. The options object resize options contains following properties: width: the new panel width height: the new panel height

left: the new panel left position top: the new panel top position

Move the panel to a new position. The options object move options contains following properties: left: the new panel left position top: the new panel top position

maximize

none

Fits the panel winthin its container.

minimize

none

Minimizing the panel.

restore

none

Restores the maximized panel back to its original size and position.

Collapses the panel body. When forceCollapse is collapse forceCollapse setted to true, the onBeforeCollapse event will not be triggered.

Expand the panel body. When forceExpand is setted expand forceExpand to true, the onBeforeExpand event will not be triggered.

Tabs

Usage
Markup
<div id="tt" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div>

<div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" icon="icon-reload" closable="true" style="padding:20px;display:none;"> tab3 </div> </div>

jQuery
To create a tabs container

$('#tt').tabs(options);
To add a tab panel:

$('#tt').tabs('add',{ title:'New Tab', content:'Tab Body', closable:true });

var pp = $('#tt').tabs('getSelected'); var tab = pp.panel('options').tab; // the corresponding tab object

Dependencies

panel

Options
Tabs Container
Override defaults with $.fn.tabs.defaults.

Properties

Name

Type

Description

Default

width

number

The width of tabs container.

auto

height

number

The height of tabs container.

auto

plain

boolean

True to render the tab strip without a background container image.

false

fit

boolean

True to set the size of tabs container to fit it's parent container.

false

border

boolean

True to show tabs container border.

true

scrollIncrement

number

The number of pixels to scroll each time a tab scroll button is pressed.

100

scrollDuration

number

The number of milliseconds that each scroll animation should last.

400

Events
Name Parameters Description

onLoad

panel

Fires when an ajax tab panel finish loading remote data.

onSelect

title

Fires when user select a tab panel.

onBeforeClose

title

Fires before the tab panel is closed, return false to cancel this close action.

onClose

title

Fires when user close a tab panel.

onAdd

title

Fires when a new tab panel is added.

onUpdate

title

Fires when a tab panel is updated.

Methods
Name Parameter Description

options

none

Return the tabs options.

tabs

none

Return all tab panels.

resize

none

Resize the tabs container and do layout.

Add a new tab panel, the options parameter is a add options config object, see tab panel properties for more details.

close

title

Close a tab panel, title parameter indicate which panel to be closed.

getTab

title

Get the specified tab panel.

getSelected

none

Get the selected tab panel.

select

title

Select a tab panel.

exists

title

Indicate if the special panel is exists.

Update the specified tab panel, the param parameter update param contains two properties: tab: the tab panel to be updated. options: the panel options.

Tab Panel
Properties

Name

Type

Description

Default

title

string

The tab panel title text.

content

string

The tab panel content.

href

string

A URL to load remote content to fill the tab panel.

null

cache

boolean

True to cache the tab panel, valid when href property is setted.

true

iconCls

string

An icon CSS class to show on tab panel title.

null

When set to true, the tab panel will show a closable boolean closable button which can click to close the tab panel. false

selected

boolean

When set to true, tab tab panel will be selected.

false

width

number

The width of tab panel.

auto

height

number

The height of tab panel.

auto

Accordion

Usage
Markup
<div id="aa" style="width:300px;height:200px;"> <div title="Title1" icon="icon-save" style="overflow:auto;padding:10px;"> <h3 style="color:#0099FF;">Accordion for jQuery</h3>

<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> </div> <div title="Title2" icon="icon-reload" selected="true" style="padding:10px;"> content2 </div> <div title="Title3"> content3 </div> </div>

jQuery
$('#aa').accordion(options);

Dependencies

panel

Options
Container Options
Name Type Description Default

width

number

The width of accordion container.

auto

height

number

The height of accordion container.

auto

fit

boolean

Set to true to set the accordion container size fit it's parent container.

false

border

boolean

Defines if to show the border.

true

animate

boolean

Defines if to show animation effect when expand or collapse panel.

true

Panel Options
The accordion panel options is inhirited from panel, many properties is defined in <div/> markup. Bellow is the addition properties:

Name

Type

Description

Default

selected

boolean

Set to true to expand the panel.

false

Events
Name Parameters Description

onSelect

title

Fires when a panel is selected.

onAdd

title

Fires when a new panel is added.

onBeforeRemove

title

Fires before a panel is removed, return false to cancel the remove action.

onRemove

title

Fires when a panel is removed.

Methods
Name Parameter Description

options

none

Return the options of accordion.

panels

none

Get all panels.

resize

none

Resize the accordion.

getSelected

none

Get the selected panel.

getPanel

title

Get the specified panel.

select

title

Select the specified panel.

add

options

Add a new panel.

remove

title

Remove the specified panel.

Layout

Usage
Markup
The layout panel must has one 'center' panel.

<div id="cc" style="width:600px;height:400px;"> <div region="north" title="North Title" split="true" style="height:100px;"></div> <div region="south" title="South Title" split="true" style="height:100px;"></div> <div region="east" icon="icon-reload" title="East" split="true" style="width:100px;"></div> <div region="west" split="true" title="West" style="width:100px;"></div> <div region="center" title="center title" style="padding:5px;background:#eee;"></div> </div>

jQuery
$('#cc').layout(options);

Dependencies

panel

resizable

Options
Layout Panel Options
All the properties is defined on <div/> markup, which the layout panel is created from it.

Name

Type

Description

Default

title

string

The layout panel title text.

null

region

string

Defines the layout panel position, the value is one of following: north, south, east, west, center.

border

boolean

True to show layout panel border.

true

split

boolean

True to show a split bar which user can change the panel size.

false

icon

string

An icon CSS class to show a icon on panel header.

null

href

string

An URL to load data from remote site.

null

Methods
Name Parameter Description

resize

none

Set the layout size.

panel

region

Return the specified panel, the 'region' parameter possible values:'north','south','east','west','center'.

collapse

region

Collapse the specified panel, the 'region' parameter possible values:'north','south','east','west'.

expand

region

Expand the specified panel, the 'region' parameter possible values:'north','south','east','west'.

Menu

Usage
Markup
<div id="mm" style="width:120px;"> <div>New</div> <div> <span>Open</span> <div style="width:150px;"> <div><b>Word</b></div> <div>Excel</div> <div>PowerPoint</div> </div> </div> <div icon="icon-save">Save</div> <div class="menu-sep"></div> <div>Exit</div> </div>

jQuery
To create a menu:

$('#mm').menu(options);
To show a menu on special position:

$('#mm').menu('show', { left: 200, top: 100

});

Dependencies
none

Options
Override defaults with $.fn.menu.defaults.

Properties
Name Type Description Default

zIndex

number

Menu z-index style,increase from it.

110000

left

number

Menu left position.

top

number

Menu top position.

Indicate a different page URL that can be displayed href string in the current browser window when clicked menu item. null

Events
Name Parameters Description

onShow

none

Fires after menu is showed.

onHide

none

Fires after menu is hidden.

Methods

Name

Parameter

Description

Show a menu on special position. show pos pos parameter have two properties: left: the new left position. top: the new top position.

hide

none

Hide a menu.

LinkButton

Usage
Markup
<a href="#" id="btn" icon="icon-search">easyui</a>

jQuery
$('#btn').linkbutton(options);

Dependencies
none

Options
Override defaults with $.fn.linkbutton.defaults.

Properties

Name

Type

Description

Default

id

string

The id attribute of this component.

null

disabled

boolean

True to disable the button

false

plain

boolean

True to show a plain effect.

false

text

string

The button text.

''

iconCls

string

A CSS class to display a 16x16 icon on left.

null

Methods
Name Parameter Description

options

none

Return options property.

disable

none

Disable the button

enable

none

Enable the button

MenuButton

Usage
Markup
<a href="javascript:void(0)" id="mb" icon="icon-edit">Edit</a>

<div id="mm" style="width:150px;"> <div icon="icon-undo">Undo</div> <div icon="icon-redo">Redo</div> <div class="menu-sep"></div> <div>Cut</div> <div>Copy</div> <div>Paste</div> <div class="menu-sep"></div> <div icon="icon-remove">Delete</div> <div>Select All</div> </div>

jQuery
$('#mb').menubutton({ menu: '#mm' });

Dependencies

menu linkbutton

Options
Override default with $.fn.menubutton.defaults.

Name

Type

Description

Default

disabled

boolean

True to disable the button.

false

plain

boolean

True to show plain effect.

false

menu

string

A selector to create a corresponding menu.

null

duration

number

Defines duration time in milliseconds to show menu when hovering the button.

100

SplitButton

Usage
Markup
<a href="javascript:void(0)" id="sb" icon="icon-ok" onclick="javascript:alert('ok')">Ok</a> <div id="mm" style="width:100px;"> <div icon="icon-ok">Ok</div> <div icon="icon-cancel">Cancel</div> </div>

jQuery
$('#sb').splitbutton({ menu:'#mm' });

Dependencies

menu linkbutton

Options
Override default with $.fn.splitbutton.defaults.

Name

Type

Description

Default

disabled

boolean

True to disable the button.

false

plain

boolean

True to show plain effect.

false

menu

string

A selector to create a corresponding menu.

null

duration

number

Defines duration time in milliseconds to show menu when hovering the button.

100

Form

Usage
Markup
<form id="ff" method="post"> ... </form>

jQuery
To make the form become ajax submit form

$('#ff').form({ url:..., onSubmit: function(){ // do some check // return false to prevent submit; }, success:function(data){ alert(data) } });
To do a submit action

$('#ff').form('submit', { url:..., onSubmit: function(){ // do some check // return false to prevent submit; }, success:function(data){ alert(data) } });

Dependencies
none

Options
Properties
Name Type Description Default

url

string

The form action URL to submit

null

Events
Name Parameters Description

onSubmit

none

Fires before submit, return false to prevent submit action.

success

data

Fires when the form is submitted successfuly.

onBeforeLoad

param

Fires before a request is made to load data. Return false to cancel this action.

onLoadSuccess

data

Fires when the form data is loaded.

onLoadError

none

Fires when some errors occur while loading form data.

Methods
Name Parameter Description

Do the submit action, the options parameter is a object which contains following properties: submit options url: the action URL onSubmit: callback function before submit submit: callback function after submit successfuly

Load records to fill the form. load data The data parameter can be a string or a object type, when string acts as a remote URL, otherwise acts as a local record

clear

none

Clear the form data

validate

none

Do the form fields validation, return true when all fields is valid. The method is used with the validatebox plugin.

ComboBox

Usage
Markup
<select id="cc" name="dept" style="width:200px;"> <option value="aa">aitem1</option> <option>bitem2</option>

<option>bitem3</option> <option>ditem4</option> <option>eitem5</option> </select>

jQuery
$('#cc').combobox(options);
To create from remote data:

$('#cc').combobox({ url:'combobox_data.json', valueField:'id', textField:'text' });

[{ "id":1, "text":"text1" },{ "id":2, "text":"text2" },{ "id":3, "text":"text3", "selected":true },{ "id":4, "text":"text4" },{ "id":5, "text":"text5" }]

Dependencies

validatebox

Options

Override defaults with $.fn.combobox.defaults.

Properties
Name Type Description Default

width

number

The width of the component.

auto

listWidth

number

The width of the drop down list.

null

listHeight

number

The height of the drop down list.

null

valueField

string

The underlying data value name to bind to this ComboBox.

value

textField

string

The underlying data field name to bind to this ComboBox.

text

editable

boolean

Defines if user can type text directly into the field.

true

disabled

boolean

Defines if to disable the field.

false

url

string

A URL to load list data from remote.

null

data

array

The list data to be loaded.

null

required

boolean

Defines if the field should be inputed.

false

missingMessage

string

Tooltip text that appears when the text box is empty.

This field is required.

Events

Name

Parameters

Description

onLoadSuccess

none

Fires when remote data is loaded successfully.

onLoadError

none

Fires when remote data load error.

onSelect

record

Fires when user select a list item.

onChange

newValue, oldValue

Fires when the field value is changed.

Methods
Name Parameter Description

destroy

none

Destroy the component.

resize

width

Resize the component width.

select

value

Select an item in the dropdown list.

clear

none

Clear the component value.

Set the specified value into the field. The 'param' setValue param parameter can be a value string or a javascript object that contains two properties corresponding to valueField and textField property.

getValue

none

Get the field value.

getText

none

Get the field text.

loadData

data

Load the locale list data.

reload

url

Request the remote list data.

disable

none

Disable the field.

enable

none

Enable the field.

ComboTree

Usage
Markup
<select id="cc" style="width:200px;"></select>

jQuery
$('#cc').combotree({ url:'tree_data.json' });

Dependencies

tree validatebox

Options
Override defaults with $.fn.combotree.defaults.

Properties
Name Type Description Default

width

number

The width of the component.

auto

treeWidth

number

The width of the tree list.

null

treeHeight

number

The height of the tree list.

200

url

string

A URL to load remote tree data.

null

data

array

The data to be loaded.

null

disabled

boolean

Defines if to disable the field.

false

required

boolean

Defines if the field should be inputed.

false

missingMessage

string

Tooltip text that appears when the text box is empty.

This field is required.

Events
Name Parameters Description

onBeforeSelect

node

Fires before a tree node is selected, return false to cancel the selection.

onSelect

node

Fires when user select a tree node.

onChange

newValue, oldValue

Fires when the field value is changed.

Methods
Name Parameter Description

destroy

none

Destroy the component.

resize

width

Resize the component width.

tree

none

Get the tree.

clear

none

Clear the component value.

Set the specified value into the field. The 'param' setValue param parameter can be a tree node id value or a javascript object that contains two properties: id and text.

getValue

none

Get the field value.

getText

none

Get the field text.

loadData

data

Load the locale tree data.

reload

url

Request the remote tree data again.

disable

none

Disable the field.

enable

none

Enable the field.

NumberBox

Usage
Markup
<input type="text" id="nn"></input>

jQuery

$('#nn').numberbox(options);

Dependencies

validatebox

Options
Override defaults with $.fn.numberbox.defaults.

Properties
Name Type Description Default

disabled

boolean

Defines if to disable the field.

false

min

number

The minimum allowed value.

null

max

number

The maximum allowed value.

null

precision

number

The maximum precision to display after the decimal separator.

Methods
Name Parameter Description

disable

none

Disable the field.

enable

none

Enable the field.

ValidateBox

Usage
Markup
<input id="vv" required="true" validType="email">

jQuery
$('#vv').validatebox(options)

Validate Rule
The validate rule is defined by using required and validType property, here are the rules already implemented:

email: Match email regex rule. url: Match URL regex rule. length[0,100]: Between x and x characters allowed.

To custom validate rule, override $.fn.validatebox.defaults.rules that defines a validator function and invalid message. For example, to define a minLength valid type:

$.extend($.fn.validatebox.defaults.rules, { minLength: { validator: function(value, param){ return value.length >= param[0]; }, message: 'Please enter at least {0} characters.' } });
Now you can use the minLength validtype:

<input class="easyui-validatebox" validType="minLength[5]">

Dependencies
none

Options
Override defaults with $.fn.validatebox.defaults

Properties
Name Type Description Default

required

boolean

Defines if the field should be inputed.

false

validType

string

Defines the field valid type, such as email, url, etc.

null

missingMessage

string

Tooltip text that appears when the text box is empty.

This field is required.

invalidMessage

string

Tooltip text that appears when the content of text box is invalid.

null

Methods
Name Parameter Description

destroy

none

Remove and destroy the component.

validate

none

Do the validation to determine whether the content of text box is valid.

isValid

none

call validate method and return the validation result, true or false.

DateBox

Usage
Markup
<input id="dd" type="text"></input>

jQuery
$('#dd').datebox(options);

Dependencies

calendar validatebox

Options
Override defaults with $.fn.datebox.defaults

Properties
Name Type Description Default

currentText

string

The text to display for the current day button.

Today

closeText

string

The text to display for the close button.

Close

disabled

boolean

When true to disable the field.

false

required

boolean

Defines if the field should be inputed.

false

missingMessage

string

Tooltip text that appears when the text box is empty.

This field is required.

A function to format the date, the formatter function function take a 'date' parameter and return a string value.

A function to parse a date string, the parser function function take a 'date' string and return a date value.

Events
Name Parameters Description

onSelect

date

Fires when user select a date.

Methods
Name Parameter Description

destroy

none

Destroy the component.

disable

none

Disable the field.

enable

none

Enable the field.

Calendar

Usage
Markup
<div id="cc" style="width:180px;height:180px;"></div>

jQuery
$('#cc').calendar(options);

Options
Override defaults with $.fn.calendar.defaults

Properties
Name Type Description Default

width

number

The width of calendar component.

180

height

number

The height of calendar component.

180

When true to set the fit boolean calendar size fit it's parent container. false

border

boolean

Defines if to show the border.

true

weeks

array

The list of week to be showed.

['S','M','T','W','T','F','S']

months

array

The list of month to be showed.

['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

year

number

The year of calendar.

current year(four digits)

month

number

The month of calendar.

current month, start with 1

current

Date

The current date.

current date

Events
Name Parameters Description

onSelect

date

Fires when user select a date.

Window

Usage
Markup
Many window properties can be defined in markup, such as icon, title, etc.

<div id="win" icon="icon-save" title="My Window"> Window Content </div>

jQuery
To create a window:

$('#win').window(options);
To open a window:

$('#win').window('open');

Dependencies

draggable resizable panel

Options
Override defaults with $.fn.window.defaults.

Properties
Many window properties can inhirit from panel, below is the window private properties.

Name

Type

Description

Default

zIndex

number

Window z-index,increase from it.

9000

draggable

boolean

Defines if window can be dragged.

true

resizable

boolean

Defines if window can be resized.

true

shadow

boolean

If set to true,when window show the shadow will show also.

true

modal

boolean

Defines if window is a modal window.

true

Window override some panel properties.

Name

Type

Description

Default

title

string

The window title text.

New Window

collapsible

boolean

Defines if to show collapsible button.

true

minimizable

boolean

Defines if to show minimizable button.

true

maximizable

boolean

Defines if to show maximizable button.

true

closable

boolean

Defines if to show closable button.

true

Events
Window events is same as panel events, see panel events for more information.

Methods
Window methods is same as panel methods, except the 'header' and 'body' method.

Dialog

Usage
Markup
<div id="dd" title="My Dialog" style="width:400px;height:200px;"> Dialog Content. </div>

jQuery

$('#dd').dialog(options);

Dependencies

draggable resizable panel window linkbutton

Options
Override defaults with $.fn.dialog.defaults.

Properties
Many properties can inhirit from window, below is the dialog private properties:

Name

Type

Description

Default

title

string

The dialog title text.

New Dialog

collapsible

boolean

Defines if to show collapsible button.

false

minimizable

boolean

Defines if to show minimizable button.

false

maximizable

boolean

Defines if to show maximizable button.

false

resizable

boolean

Defined if the dialog can be resized.

false

The top toolbar of dialog, each tool toolbar array contains: text, iconCls, disabled, handler etc. null

buttons

array

The bottom buttons of dialog, each button contains: text, iconCls, handler etc.

null

Events
Dialog events is same as window events, see window events for more information.

Methods
Dialog methods is same as window methods, see window methods for more information.

Messager

Dependencies

draggable resizable panel window linkbutton

Options
Override defaults with $.messager.defaults.

Name

Type

Description

Default

ok

string

The Ok button text.

Ok

cancel

string

The Cancel button text.

Cancel

Methods

Name

Parameters

Description

Show a message window on right bottom of screen. The options parameter is a configuration object: showType: Defines how the message window to be showed. Available values are: null,slide,fade,show. Defaults to slide. showSpeed: Defines the time in milliseconds message window finishs show. Defaults to 600. $.messager.show options width: Defines the width of message window. Defaults to 250. height: Defines the height of message window. Defaults to 100. msg: The message text to be showed. title: The title text to be showed on header panel. timeout: If defines to 0, the message window will not close unless user close it. Defines to unzero, the message window will be auto closed when timeout.

Show an alert window. Parameters: title: The title text to be showed on header panel. $.messager.alert title, msg, icon, fn msg: The message text to be showed. icon: The icon image to be showed. Available value are: error,question,info,warning. fn: The callback function triggered when window closed.

Show a confirmation message window with Ok and Cancel buttons. Parameters: title: The title text to be showed on header $.messager.confirm title, msg, fn panel. msg: The message text to be showed. fn(b): The callback function, when user click Ok button, pass a true value to function, otherwise pass a false to it.

Show a message window with Ok and Cancel buttons prompting user to enter some text. Parameters: $.messager.prompt title, msg, fn title: The title text to be showed on header panel. msg: The message text to be showed. fn(val): The callback function with a value parameter user entered.

Pagination

Usage
Markup
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>

jQuery
$('#pp').pagination(options);

Dependencies

linkbutton

Options
Override defaults with $.fn.pagination.defaults.

Properties

Name

Type

Description

Default

The total records, which total number should be setted when pagination is created. 1

pageSize

number

The page size.

10

pageNumber

number

Show the page number when pagination is created.

User can change the page pageList array size. The pageList property defines how many size can be changed. [10,20,30,50]

loading

boolean

Defines if data is loading.

false

Defines custom buttons, each button contains two properties: buttons array iconCls: the CSS class which will show a background image handler: a handler function when button is clicked null

showPageList

boolean

Defines if to show page list.

true

showRefresh

boolean

Defines if to show refresh button.

true

beforePageText

string

Show a label before the input component.

Page

afterPageText

string

Show a label after the input component.

of {pages}

Displaying {from} displayMsg string Display a page information. to {to} of {total} items

Events
Name Parameters Description

Fires when user select a new page. onSelectPage pageNumber, pageSize callback function contains two parameter: pageNumber: the new page number pageSize: the new page size

onBeforeRefresh

pageNumber, pageSize

Fires before the refresh button is clicked, return false to cancel the refresh action.

onRefresh

pageNumber, pageSize

Fires after refresh.

onChangePageSize

pageSize

Fires when user change the page size.

DataGrid

Usage
Markup
<table id="tt"></table>

jQuery
$('#tt').datagrid(options);

The DataGrid data format sample

{"total":28,"rows":[{"productid":"FI-SW-01","unitcost":10 .00,"status":"P","listprice":16.50,"attr1":"Large","itemi d":"EST-1"}, {"productid":"K9-DL-01","unitcost":12.00,"status":"P","li stprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"}, {"productid":"RP-SN-01","unitcost":12.00,"status":"P","li stprice":18.50,"attr1":"Venomless","itemid":"EST-11"}, {"productid":"RP-SN-01","unitcost":12.00,"status":"P","li stprice":18.50,"attr1":"Rattleless","itemid":"EST-12"}, {"productid":"RP-LI-02","unitcost":12.00,"status":"P","li stprice":18.50,"attr1":"Green Adult","itemid":"EST-13"}, {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","l istprice":58.50,"attr1":"Tailless","itemid":"EST-14"}, {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","l istprice":23.50,"attr1":"With tail","itemid":"EST-15"}, {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","l istprice":93.50,"attr1":"Adult Female","itemid":"EST-16"}, {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","l istprice":93.50,"attr1":"Adult Male","itemid":"EST-17"}, {"productid":"AV-CB-01","unitcost":92.00,"status":"P","li stprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}]}

Dependencies

panel resizable linkbutton pagination

Options
DataGrid Properties
Override default with $.fn.datagrid.defaults.

Name

Type

Description

Default

title

string

The datagrid panel title text.

null

A CSS class that will provide a iconCls string background image to be used as the header icon. null

border

boolean

True to show datagrid panel border.

true

width

number

The width of datagrid width.

auto

height

number

The height of datagrid height.

auto

The datagrid columns config columns array object, see column properties for more details. null

Same as the columns frozenColumns array property, but the these columns will be frozen on left. null

striped

boolean

True to stripe the rows.

false

method

string

The method type to request remote data.

post

nowrap

boolean

True to display data in one line.

true

idField

string

Indicate which field is an identity field.

null

url

string

A URL to request data from remote site.

null

When loading data from loadMsg string remote site, show a prompt message.

Processing, please wait

pagination

boolean

True to show a pagination toolbar on datagrid bottom.

false

rownumbers

boolean

True to show a row number column.

false

singleSelect

boolean

True to allow selecting only one row.

false

fit

boolean

True to set size to fit it's parent container.

false

pageNumber

number

When set pagination property, initialize the page number.

pageSize

number

When set pagination property, initialize the page size.

10

When set pagination property, pageList array initialize the page size selecting list. [10,20,30,40,50]

When request remote data, queryParams object sending additional parameters also. {}

sortName

string

Defines which column can be sorted.

null

sortOrder

string

Defines the column sort order, can only be 'asc' or 'desc'.

asc

remoteSort

boolean

Defines if to sort data from server.

true

editors

object

Defines the editor when editing a row.

predefined editors

Column Properties

The DataGrid Columns is an array object, which element is an array too. The element of element array is a config object, which defines every column field. code example:

columns:[[ {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true}, {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true}, {title:'Item Details',colspan:4} ],[ {field:'listprice',title:'List Price',width:80,align:'right',sortable:true}, {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true}, {field:'attr1',title:'Attribute',width:100}, {field:'status',title:'Status',width:60} ]]
Nam e Type Description Defa ult

title

string

The column title text.

undefi ned

field

string

The column field name.

undefi ned

width

number

The width of column.

undefi ned

rowsp an

number

Indicate how many rows a cell should take up.

undefi ned

colsp an

number

Indicate how many columns a cell should take up.

undefi ned

align

string

Indicate how to align the column data. 'left','right','center' can be used.

undefi ned

sorta ble

boolean

True to allow the column can be sorted.

undefi ned

check box

boolean

True to show a checkbox.

undefi ned

The cell formatter function. take three parameter: forma tter function value: the field value. rowData: the row record data. rowIndex: the row index. undefi ned

The custom field sort function, take three parameter: sorter function a: the first field value. b: the second field value. order: the sort order, 'asc' or 'desc'. undefi ned

Indicate the edit type. When string indicates the edit type, when object contains two properties: editor string,o bject type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,dat ebox,combobox,combotree. options: object, the editor options corresponding to the edit type. undefi ned

Events
Name Parameters Description

onLoadSuccess

data

Fires when data is loaded successfully.

onLoadError

none

Fires when some error occur to load remote data.

Fires before a request is made to load data. onBeforeLoad param If return false the load action will be canceled.

Fires when user click a row, the onClickRow rowIndex, rowData parameters contains: rowIndex: the clicked row index, start with 0

rowData: the record corresponding to the clicked row

Fires when user dblclick a row, the parameters contains: onDblClickRow rowIndex, rowData rowIndex: the clicked row index, start with 0 rowData: the record corresponding to the clicked row

Fires when user sort a column, the onSortColumn sort, order parameters contains: sort: the sort column field name order: the sort column order

Fires when user select a row, the parameters contains: onSelect rowIndex, rowData rowIndex: the selected row index, start with 0 rowData: the record corresponding to the selected row

Fires when user unselect a row, the parameters contains: onUnselect rowIndex, rowData rowIndex: the unselected row index, start with 0 rowData: the record corresponding to the unselected row

Fires when user start editing a row, the parameters contains: onBeforeEdit rowIndex, rowData rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row

Fires when user finish editing, the parameters contains: onAfterEdit rowIndex, rowData, changes rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row

changes: the changed field/value pairs

Fires when user cancel editing a row, the parameters contains: onCancelEdit rowIndex, rowData rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row

Methods
Name Parameter Description

options

none

Return the options object.

getPager

none

Return the pager object.

getPanel

none

Return the panel object.

resize

param

Do resize and do layout.

reload

param

Reload the rows. If the 'param' is specified, it will replace with the queryParams property.

fixColumnSize

none

fix columns size.

loadData

data

Load local data, the old rows will be removed.

getData

none

Return the loaded data.

getRows

none

Return the current page rows.

getRowIndex

row

Return the specified row index, the row parameter can be a row record or an id field value.

getSelected

none

Return the first selected row record or null.

getSelections

none

Return all selected rows, when no record selected, am empty array will return.

clearSelections

none

Clear all selections.

selectAll

none

Select all current page rows.

selectRow

index

Select a row, the row index start with 0.

selectRecord

idValue

Select a row by passing id value parameter.

unselectRow

index

Unselect a row.

beginEdit

index

Begin editing a row.

endEdit

index

End editing a row.

cancelEdit

index

Cancel editing a row.

refreshRow

index

Refresh a row.

validateRow

index

validate the specified row, return true when valid.

appendRow

row

Append a new row.

deleteRow

index

Delete a row.

Get changed rows since the last commit. The type parameter indicate which type changed rows, getChanges type possible value is: inserted,deleted,updated,etc. When the type parameter is not assigned, return all changed rows.

acceptChanges

none

Commits all the changes data since it was loaded or since the last time acceptChanges was called.

rejectChanges

none

Rolls back all the changes data since it was created, or since the last time acceptChanges was

called.

Merge some cells to one cell, the options contains following properties: mergeCells options index: the row index. field: the field name. rowspan: the rowspan count to be merged. colspan: the colspan count to be merged.

Tree

Usage
Markup
Tree can be definded in <ul/> element. The markup can defines leaf and children, bellow is an example:

<ul id="tt"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> <ul> <li> <span><a href="#">File 11</a></span> </li> <li> <span>File 12</span> </li> <li> <span>File 13</span> </li> </ul> </li>

<li> <span>File 2</span> </li> <li> <span>File 3</span> </li> </ul> </li> <li> <span>File21</span> </li> </ul>
Tree can also be defined in an empty <ul/> element:

<ul id="tt"></ul>

jQuery
$('#tt').tree(options);

Tree data format

id: node id, which is important to load remote data text: node text to show state: node state, 'open' or 'closed', default is 'open'. When set to 'closed', the node have children nodes and will load them from remote site checked: Indicate whether the node is checked selected. attributes: custom attributes can be added to a node children: an array nodes defines some children nodes

Some example:

[{ "id":1, "text":"Folder1", "iconCls":"icon-save", "children":[{ "text":"File1", "checked":true },{

"text":"Books", "state":"open", "attributes":{ "url":"/demo/book/abc", "price":100 }, "children":[{ "text":"PhotoShop", "checked":true },{ "id": 8, "text":"Sub Bookds", "state":"closed" }] }] },{ "text":"Languages", "state":"closed", "children":[{ "text":"Java" },{ "text":"C#" }] }]

Dependencies
none

Options
Override defaults with $.fn.tree.defaults. Tree Node is a javascript object which contains following properties:

id: An identity value bind to the node. text: Text to be showed. checked: Whether the node is checked. attributes: Custom attributes bind to the node. target: Target DOM object.

Properties

Name

Type

Description

Default

url

string

a URL to retrive remote data.

null

animate

boolean

Defines if to show animation effect when node expand or collapse.

false

checkbox

boolean

Defines if to show the checkbox before every node.

false

data

array

The node data to be loaded.

null

Events
Name Parameters Description

Fires when user click a node, the node parameter contains following properties: id: the node id onClick node text: the node text checked: Whether the node is checked attributes: the node custom attributes target: the target clicked DOM object

onDblClick

node

Fires when user dblclick a node.

onBeforeLoad

node, param

Fires before a request is made to load data, return false to cancel this load action.

onLoadSuccess

node, data

Fires when data loaded successfully.

Fires when data loaded fail, the arguments onLoadError arguments parameter is same as the 'error' function of jQuery.ajax.

onBeforeExpand

node

Fires before node is expanded, return false to cancel this expand action.

onExpand

node

Fires when node is expanded.

onBeforeCollapse

node

Fires before node is collapsed, return false to cancel this collapse action.

onCollapse

node

Fires when node is collapsed.

Methods
Name Parameter Description

options

none

Return the options of tree.

loadData

data

Load the tree data.

reload

none

Reload tree data.

getRoot

none

Get the root node, return node object

getRoots

none

Get the root nodes, return node array.

getParent

target

Get the parent node, the target parameter indicate the node DOM object.

getChildren

target

Get the children nodes, the target parameter indicate the node DOM object.

getChecked

none

Get all checked nodes.

getSelected

none

Get the selected node and return it, if no node selected return null.

isLeaf

target

Determine the specified node is leaf, the target parameter indicate the node DOM object.

find

id

Find the specifed node and return the node object.

select

target

Select a node, the target parameter indicate the node DOM object.

check

target

Set the specified node to checked.

uncheck

target

Set the specified node to unchecked.

collapse

target

Collapse a node, the target parameter indicate the node DOM object.

expand

target

Expand a node, the target parameter indicate the node DOM object.

collapseAll

none

Collapse all nodes.

expandAll

none

Expand all nodes.

expandTo

target

Expand from root to specified node.

Append some children nodes to a parent node. param parameter has two properties: append param parent: DOM object, the parent node to append to, if not assigned, append as root nodes. data: array, the nodes data.

toggle

target

Toggles expanded/collapsed state of the node, the target parameter indicate the node DOM object.

remove

target

Remove a node and it's children nodes, the target parameter indicate the node DOM object.

pop

target

Pop a node and it's children nodes, the method is same as remove but return the removed node data.

Update the specified node. param has following update param properties: target(DOM object, the node to be updated),id,text,iconCls,checked,etc.