jQuery UI API

Base

Parser

Usage

1. $.parser.parse();       // parse all the page   
2. $.parser.parse('#cc');  // parse the specified node  

$.parser.parse(); // parse all the page

$.parser.parse('#cc'); // parse the specified node

Properties

Name	Type	Description	Default
$.parser.auto	boolean	Defines if to auto parse the easyui component.	true

Events

Name	Parameters	Description
$.parser.onComplete	context	Fires when parser finishing its parse action.

Methods

Name	Parameter	Description
$.parser.parse	context	Parse the easyui component.

EasyLoader

Usage

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

easyloader.base = '../';    // set the easyui base directory

easyloader.load('messager', function(){        // load the specified module

$.messager.alert('Title', 'load ok');

});

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
theme	string	The name of theme that 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 timeout occurs.	2000

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	module, callback	Load the specified module. When load success a callback function will be called. 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

Override defaults with $.fn.draggable.defaults.

Usage

1. <div id="dd" style="width:100px;height:100px;">  
2.     <div id="title" style="background:#ccc;">title</div>  
3. </div>  

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

Properties

Name	Type	Description	Default
proxy	string,function	A proxy element to be used when 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.	0
axis	string	Defines the axis which the dragged 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
onBeforeDrag	e	Fires before dragging, return false to cancel this dragging.
onStartDrag	e	Fires when the target object start dragging.
onDrag	e	Fires during dragging. Return false will not do dragging actually.
onStopDrag	e	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

Override defaults with $.fn.droppable.defaults.

Usage

1. <div id="dd" style="width:100px;height:100px;"></div>  

1. $('#dd').droppable({   
2.     accept:'#d1,#d3'  
3. });  

Properties

Name	Type	Description	Default
accept	selector	Determine which draggable element will be accepted	null

Events

Name	Parameters	Description
onDragEnter	e,source	Fires when the draggable element is dragged enter. The source parameter indicate the dragged DOM element.
onDragOver	e,source	Fires when the draggable element is dragged over. The source parameter indicate the dragged DOM element.
onDragLeave	e,source	Fires when the draggable element is dragged leave. The source parameter indicate the dragged DOM element.
onDrop	e,source	Fires when the draggable element is dropped. The source parameter indicate the dragged DOM element.

Resizable

Override defaults with $.fn.resizable.defaults.

Usage

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

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

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.	5

Events

Name	Parameters	Description
onStartResize	e	Fires when start resizing.
onResize	e	Fires during resizing. When return false, the DOM element will not acts actual resize action.
onStopResize	e	Firest when stop resizing.

Pagination

Override defaults with $.fn.pagination.defaults.

Dependencies

• linkbutton

Usage

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

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

Properties

Name	Type	Description	Default
total	number	The total records, which should be setted when pagination is created.	1
pageSize	number	The page size.	10
pageNumber	number	Show the page number when pagination is created.	1
pageList	array	User can change the page size. The pageList property defines how many size can be changed.	[10,20,30,50]
loading	boolean	Defines if data is loading.	false
buttons	array	Defines custom buttons, each button contains two properties: 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}
displayMsg	string	Display a page information.	Displaying {from} to {to} of {total} items

Events

Name	Parameters	Description
onSelectPage	pageNumber, pageSize	Fires when user select a new page. 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.

Methods

Name	Parameter	Description
options	none	Return the options object.
loading	none	Make the pagination to become loading status.
loaded	none	Make the pagination to become loaded status.

SearchBox

Override defaults with $.fn.searchbox.defaults.

Dependencies

• menubutton

Usage Example

Create SearchBox

1. Create from markup. Add 'easyui-searchbox' class to <input/> markup.

1. <script type="text/javascript">  
2.     function qq(value,name){   
3.         alert(value+":"+name)   
4.     }   
5. </script>  
6. <input id="ss" class="easyui-searchbox"  
7.         searcher="qq"  
8.         prompt="Please Input Value" menu="#mm" style="width:300px"></input>  
9.            
10. <div id="mm" style="width:120px">  
11.     <div name="all" iconCls="icon-ok">All News</div>  
12.     <div name="sports">Sports News</div>  
13. </div>  

2. Create programatically.

1. <input id="ss"></input>   
2. <div id="mm" style="width:120px">   
3.     <div name="all" iconCls="icon-ok">All News</div>   
4.     <div name="sports">Sports News</div>   
5. </div>   
6. $('#ss').searchbox({   
7.     width:200,   
8.     searcher:function(value,name){   
9.         alert(value + "," + name)   
10.     },   
11.     menu:'#mm',   
12.     prompt:'Please Input Value'  
13. });  

Properties

Name	Type	Description	Default
width	number	Set the component width.	auto
propmt	string	The prompt message to be displayed in input box.	''
value	string	The inputed value.	''
menu	selector	The search type menu.	null
searcher	function(value,name)	The searcher function that will be called when user presses the searching button or press ENTER key.	null

Methods

Name	Parameter	Description
options	none	Return the options object.
menu	none	Return the search type menu object.
textbox	none	Return the text box object.
getValue	none	Return the current searching value.
setValue	value	Set a new searching value.
getName	none	Return the current searching type name.
destroy	none	Destroy this component.
resize	width	Reset the component width.

ProgressBar

Override defaults with $.fn.progressbar.defaults.

Dependencies

• none

Usage Example

Create ProgressBar

The ProgressBar component can be created from html markup or programatically. Creation from markup is even easier. Add 'easyui-progressbar' class to <div/> markup.

1. <div id="p" class="easyui-progressbar" style="width:400px;"></div>  

Get or Set Value

We get the current value and set a new value for this component.

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

Properties

Name	Type	Description	Default
width	string	Set the progressbar width.	auto
value	number	The percentage value.	0
text	string	The text template to be displayed on component.	{value}%

Events

Name	Parameters	Description
onChange	newValue,oldValue	Fires when the value is changed.

Methods

Name	Parameter	Description
options	none	Return the options object.
resize	width	Resize the component.
getValue	none	Return the current progress value.
setValue	value	Set a new progress value.

Layout

Panel

Override defaults with $.fn.panel.defaults.

Usage Example

Create Panel

1. Create Panel via markup

Creation from markup is even easier. Add 'easyui-panel' class to <div/> markup.

1. <div id="p" class="easyui-panel" title="My Panel" style="width:500px;height:150px;padding:10px;background:#fafafa;"  
2.         iconCls="icon-save"  closable="true"  
3.         collapsible="true" minimizable="true" maximizable=true>  
4.     <p>panel content.</p>  
5.     <p>panel content.</p>  
6. </div>  

2. Create Panel programatically

Let's create panel with tools on top right.

1. <div id="p" style="padding:10px;">  
2.     <p>panel content.</p>  
3.     <p>panel content.</p>  
4. </div>  
5.   
6. $('#p').panel({  
7.   width:500,  
8.   height:150,  
9.   title: 'My Panel',  
10.   tools: [{  
11.     iconCls:'icon-add',  
12.     handler:function(){alert('new')}  
13.   },{  
14.     iconCls:'icon-save'  
15.     handler:function(){alert('save')}  
16.   }]  
17. });   

Move Panel

Call 'move' method to move panel to a new position

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

Load Content

Let's load the panel content via ajax and show some message when loaded successfully.

1. $('#p').panel({  
2.     href:'content_url.php',  
3.     onLoad:function(){  
4.         alert('loaded successfully');  
5.     }  
6. });  

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…
extractor	function	Defines how to extract the content from ajax response, return extracted data. extractor: function(data){ var pattern = /<body[^>]*>((.|[\n\r])*)<\/body>/im; var matches = pattern.exec(data); if (matches){ return matches[1]; // only extract body content } else { return data; } }

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.
onResize	width, height	Fires after panel is resized. width: the new outer width height: the new outer height
onMove	left,top	Fires after panel is moved. 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	href	Refresh the panel to load remote data when href property is setted.
resize	options	Set panel size and do layout. The options object 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	options	Move the panel to a new position. The options object 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.
collapse	animate	Collapses the panel body.
expand	animate	Expand the panel body.

Tabs

Override defaults with $.fn.tabs.defaults.

Dependencies

• panel
• linkbutton

Usage Example

Create tabs

1. Create tabs via markup

Create tabs from markup is even easier, we don't need to write any JavaScript code. Remember to add 'easyui-panel' class to <div/> markup. Each tab panel is created via sub <div/> markup, the usage is same as panel.

1. <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">  
2.     <div title="Tab1" style="padding:20px;display:none;">  
3.         tab1  
4.     </div>  
5.     <div title="Tab2" closable="true" style="overflow:auto;padding:20px;display:none;">  
6.         tab2  
7.     </div>  
8.     <div title="Tab3" iconCls="icon-reload" closable="true" style="padding:20px;display:none;">  
9.         tab3  
10.     </div>  
11. </div>  

2. Create tabs programatically

Now we create tabs programatically, we catch the 'onSelect' event also.

1. $('#tt').tabs({  
2.     border:false,  
3.     onSelect:function(title){  
4.         alert(title+' is selected');  
5.     }  
6. });  

Add new tab panel

1. // add a new tab panel  
2. $('#tt').tabs('add',{  
3.     title:'New Tab',  
4.     content:'Tab Body',  
5.     closable:true  
6. });  

Get the selected Tab

1. // get the selected tab panel and its tab object  
2. var pp = $('#tt').tabs('getSelected');  
3. var tab = pp.panel('options').tab;    // the corresponding tab object     

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
tools	array	The right toolbar, each tool options is same as linkbutton.	null

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.
onContextMenu	e, title	Fires when a tab panel is right clicked.

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	options	Add a new tab panel, the options parameter is a 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	param	Update the specified tab panel, the param parameter contains two properties: tab: the tab panel to be updated. options: the panel options.

Tab Panel

The tab panel properties is defined in panel component, below is some common 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
width	number	The width of tab panel.	auto
height	number	The height of tab panel.	auto

Some added properties.

Name	Type	Description	Default
closable	boolean	When set to true, the tab panel will show a closable button which can click to close the tab panel.	false
selected	boolean	When set to true, tab tab panel will be selected.	false

Accordion

Override defaults with $.fn.accordion.defaults.

Dependencies

• panel

Usage Example

Create Accordion

Create accordion via markup, add 'easyui-accordion' class to <div/> markup.

1. <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">  
2.     <div title="Title1" iconCls="icon-save" style="overflow:auto;padding:10px;">  
3.         <h3 style="color:#0099FF;">Accordion for jQuery</h3>  
4.         <p>Accordion is a part of easyui framework for jQuery.   
5.         It lets you define your accordion component on web page more easily.</p>  
6.     </div>  
7.     <div title="Title2" iconCls="icon-reload" selected="true" style="padding:10px;">  
8.         content2  
9.     </div>  
10.     <div title="Title3">  
11.         content3  
12.     </div>  
13. </div>  

We can change or recreate accordion later and modify some features.

1. $('#aa').accordion({  
2.     animate:false  
3. });  

Refresh Accordion Panel Content

Call 'getSelected' method to get the current panel and then we can call 'refresh' method of panel to load new content.

1. var pp = $('#aa').accordion('getSelected'); // get the selected panel  
2. if (pp){  
3.     pp.panel('refresh','new_content.php');  // call 'refresh' method to load new content  
4. }  

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, below 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

Dependencies

• panel
• resizable

Usage Example

Create Layout

Create Layout via markup. Add 'easyui-layout' class to <div/> markup.

1. <div id="cc" class="easyui-layout" style="width:600px;height:400px;">  
2.     <div region="north" title="North Title" split="true" style="height:100px;"></div>  
3.     <div region="south" title="South Title" split="true" style="height:100px;"></div>  
4.     <div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>  
5.     <div region="west" split="true" title="West" style="width:100px;"></div>  
6.     <div region="center" title="center title" style="padding:5px;background:#eee;"></div>  
7. </div>  

Create layout on whole page.

1. <body class="easyui-layout">  
2.     <div region="north" title="North Title" split="true" style="height:100px;"></div>  
3.     <div region="south" title="South Title" split="true" style="height:100px;"></div>  
4.     <div region="east" iconCls="icon-reload" title="East" split="true" style="width:100px;"></div>  
5.     <div region="west" split="true" title="West" style="width:100px;"></div>  
6.     <div region="center" title="center title" style="padding:5px;background:#eee;"></div>  
7. </body>  

Collpase Layout Panel

1. $('#cc').layout();  
2. // collapse the west panel  
3. $('#cc').layout('collapse','west');  

Layout Panel Options

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
iconCls	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 and Button

Menu

Override defaults with $.fn.menu.defaults.

Usage Example

Create Menu

Create menu via markup should add 'easyui-menu' class to <div/> markup. Each menu item is created via <div/> markup. We can add 'iconCls' attribute to menu item to define a icon that will display on left of menu item. Add 'menu-sep' class to menu item will generate a menu seperator.

1. <div id="mm" class="easyui-menu" style="width:120px;">  
2.     <div>New</div>  
3.     <div>  
4.         <span>Open</span>  
5.         <div style="width:150px;">  
6.             <div><b>Word</b></div>  
7.             <div>Excel</div>  
8.             <div>PowerPoint</div>  
9.         </div>  
10.     </div>  
11.     <div iconCls="icon-save">Save</div>  
12.     <div class="menu-sep"></div>  
13.     <div>Exit</div>  
14. </div>  

Create menu programatically and listening the 'onClick' event.

1. $('#mm').menu({  
2.     onClick:function(item){  
3.         //...  
4.     }  
5. });  

Show Menu

When menu is created, it's hidden and not visible. Call 'show' method to display menu.

1. $('#mm').menu('show', {  
2.   left: 200,  
3.   top: 100  
4. });  

Properties

Name	Type	Description	Default
zIndex	number	Menu z-index style,increase from it.	110000
left	number	Menu left position.	0
top	number	Menu top position.	0

Events

Name	Parameters	Description
onShow	none	Fires after menu is showed.
onHide	none	Fires after menu is hidden.
onClick	item	Fires when the menu item is clicked.

Methods

Name	Parameter	Description
show	pos	Show a menu on specified position. pos parameter have two properties: left: the new left position. top: the new top position.
hide	none	Hide a menu.
getItem	itemEl	Get the menu item data and return it, the data contains the following properties: target: DOM object, the menu item. id: string, the element's id attribute. text: string, the menu item text. href: string, the url location. disabled: boolean, the menu item is disabled or not. onclick: function, the function to be executed when users click the menu item. iconCls: string, the icon class.
setText	param	Set the specified menu item text. The 'param' parameter contains two properties: target: DOM object, the menu item to be setted. text: string, the new text value.
setIcon	param	Set the specified menu item icon. The 'param' parameter contains two properties: target: DOM object, the menu item. iconCls: the new icon class.
findItem	text	Find the specified menu item, the return object is same as the getItem method.
appendItem	param	Append menu item, the 'param' parameter contains the following properties: parent: DOM object that the new menu item will append to, if not setted, the new menu item will act as top menu item. text: string, the menu item text. href: string, the url location. onclick: string or function, the script code or function to be executed when users click the menu item. iconCls: string, the icon class.
removeItem	itemEl	Remove the specified menu item.
enableItem	itemEl	Enable the menu item.
disableItem	itemEl	Disable the menu item.

LinkButton

Override defaults with $.fn.linkbutton.defaults.

Usage Example

1. <a href="#" id="btn" iconCls="icon-search">easyui</a>  

1. $('#btn').linkbutton({  
2.     plain:true  
3. });  
4. $('#btn').linkbutton('disable');    // disable the button  
5. $('#btn').linkbutton('enable');     // enable the button  

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

Extend from $.fn.linkbutton.defaults. Override defaults with $.fn.menubutton.defaults.

Dependencies

• menu
• linkbutton

Usage

1. <a href="javascript:void(0)" id="mb" iconCls="icon-edit">Edit</a>  
2. <div id="mm" style="width:150px;">  
3.     <div iconCls="icon-undo">Undo</div>  
4.     <div iconCls="icon-redo">Redo</div>  
5.     <div class="menu-sep"></div>  
6.     <div>Cut</div>  
7.     <div>Copy</div>  
8.     <div>Paste</div>  
9.     <div class="menu-sep"></div>  
10.     <div iconCls="icon-remove">Delete</div>  
11.     <div>Select All</div>  
12. </div>  

1. $('#mb').menubutton({  
2.     menu: '#mm'  
3. });  

Properties

The properties extend from linkbutton, below is the added properties for menubutton.

Name	Type	Description	Default
plain	boolean	True to show plain effect.	true
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

Methods

Name	Parameter	Description
options	none	Return the options object.
disable	none	Disable the menubutton.
enable	none	Enable the menubutton.

SplitButton

Extend from $.fn.linkbutton.defaults. Override defaults with $.fn.splitbutton.defaults.

Dependencies

• menu
• linkbutton

Usage

1. <a href="javascript:void(0)" id="sb" iconCls="icon-ok" οnclick="javascript:alert('ok')">Ok</a>  
2. <div id="mm" style="width:100px;">  
3.     <div iconCls="icon-ok">Ok</div>  
4.     <div iconCls="icon-cancel">Cancel</div>  
5. </div>  

1. $('#sb').splitbutton({  
2.     menu:'#mm'  
3. });  

Properties

The properties extend from linkbutton, below is the added properties for splitbutton.

Name	Type	Description	Default
plain	boolean	True to show plain effect.	true
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

Methods

Name	Parameter	Description
options	none	Return the options object.
disable	none	Disable the splitbutton.
enable	none	Enable the splitbutton.

Form

Form

Usage

1. <form id="ff" method="post">  
2.     ...   
3. </form>  

To make the form become ajax submit form

1. $('#ff').form({   
2.     url:...,   
3.     onSubmit: function(){   
4.         // do some check   
5.         // return false to prevent submit;   
6.     },   
7.     success:function(data){   
8.         alert(data)   
9.     }   
10. });   
11. // submit the form   
12. $('#ff').submit();  

To do a submit action

1. // call 'submit' method of form plugin to submit the form   
2. $('#ff').form('submit', {   
3.     url:...,   
4.     onSubmit: function(){   
5.         // do some check   
6.         // return false to prevent submit;   
7.     },   
8.     success:function(data){   
9.         alert(data)   
10.     }   
11. });  

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
submit	options	Do the submit action, the options parameter is a object which contains following properties: url: the action URL onSubmit: callback function before submit success: callback function after submit successfuly
load	data	Load records to fill the form. 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.

ValidateBox

Override defaults with $.fn.validatebox.defaults.

Usage

1. <input id="vv" required="true" validType="email">  

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

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.
• remote['http://.../action.do','paramName']: Send ajax request to do validate value, return 'true' when successfully.

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:

1. $.extend($.fn.validatebox.defaults.rules, {   
2.     minLength: {   
3.         validator: function(value, param){   
4.             return value.length >= param[0];   
5.         },   
6.         message: 'Please enter at least {0} characters.'  
7.     }   
8. });  

Now you can use the minLength validtype to define an input box that should be inputed at least 5 characters:

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

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.

Combo

Extend from $.fn.validatebox.defaults. Override defaults with $.fn.combo.defaults.

Dependencies

• validatebox
• panel

Usage

1. <input id="cc" value="001">  
2. <select id="cc"></select>  

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

Properties

The properties extend from validatebox, below is the added properties for combo.

Name	Type	Description	Default
width	number	The width of the component.	auto
panelWidth	number	The drop down panel width.	null
panelHeight	number	The drop down panel height.	200
multiple	boolean	Defines if support multiple selection.	false
separator	string	The separator char for text when multiple selection.	,
editable	boolean	Defines if user can type text directly into the field.	true
disabled	boolean	Defines if to disable the field.	false
hasDownArrow	boolean	Defines if to display the down arrow button.	true
value	string	The default value.
delay	number	Delay to do searching from the last key input event.		200
keyHandler	object	A function called when user press key. The default keyHandler is defined as: keyHandler: { up: function(){}, down: function(){}, enter: function(){}, query: function(q){} }

Events

Name	Parameters	Description
onShowPanel	none	Fires when drop down panel show.
onHidePanel	none	Fires when drop down panel hide.
onChange	newValue, oldValue	Fires when the field value is changed.

Methods

The methods extend from validatebox, below is the added methods for combo.

Name	Parameter	Description
options	none	Return the options object.
panel	none	Return the drop down panel object.
textbox	none	Retun the textbox object.
destroy	none	Destroy the component.
resize	width	Resize the component width.
showPanel	none	Show the drop down panel.
hidePanel	none	Hide the drop down panel.
disable	none	Disable the component.
enable	none	Enable the component.
validate	none	Validate the input value.
isValid	none	Return the validate result.
clear	none	Clear the component value.
getText	none	Get the input text.
setText	text	Set the text value.
getValues	none	Get the component value array.
setValues	values	Set the component value array.
getValue	none	Get the component value.
setValue	value	Set the component value.

ComboBox

Extend from $.fn.combo.defaults. Override defaults with $.fn.combobox.defaults.

Dependencies

• combo

Usage

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

The json data format sample:

1. [{   
2.     "id":1,   
3.     "text":"text1"  
4. },{   
5.     "id":2,   
6.     "text":"text2"  
7. },{   
8.     "id":3,   
9.     "text":"text3",   
10.     "selected":true  
11. },{   
12.     "id":4,   
13.     "text":"text4"  
14. },{   
15.     "id":5,   
16.     "text":"text5"  
17. }]  

Properties

The properties extend from combo, below is the added properties for combobox.

Name	Type	Description	Default
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
mode	string	Defines how to load list data when text changed. Set to 'remote' if the combobox loads from server.	local
url	string	A URL to load list data from remote.	null
method	string	The http method to retrieve data.	post
data	array	The list data to be loaded.	null
filter	function	Defines how to filter the local data when 'mode' setted to 'local'. The function takes two parameters: q: the user typed text. row: the list row data. Return true to allow the row to be displayed.
formatter	function	Defineds how to render the row. The function takes one parameter: row.

Events

The events extend from combo, below is the added events for combobox.

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.
onUnselect	record	Fires when user unselect a list item.

Methods

The methods extend from combo, below is the added or overridden methods for combobox.

Name	Parameter	Description
options	none	Return the options object.
getData	none	Return the loaded data.
loadData	data	Load the locale list data.
reload	url	Request the remote list data.
setValues	values	Set the combobox value array.
setValue	value	Set the combobox value.
clear	none	Clear the combobox value.
select	value	Select the specified item.
unselect	value	Unselect the specified item.

ComboTree

Extend from $.fn.combo.defaults and $.fn.tree.defaults. Override defaults with $.fn.combotree.defaults.

Dependencies

• combo
• tree

Usage

1. <select id="cc" style="width:200px;"></select>  

1. <input id="cc" value="01">  

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

Properties

The properties extend from combo and tree, below is the overridden properties for combotree.

Name	Type	Description	Default
editable	boolean	Defines if user can type text directly into the field.	false

Events

The events extend from combo and tree.

Methods

The methods extend from combo, below is the added and overridden methods for combotree.

Name	Parameter	Description
options	none	Return the options object.
tree	none	Return the tree object.
loadData	data	Load the locale tree data.
reload	url	Request the remote tree data again.
clear	none	Clear the component value.
setValues	values	Set the component value array.
setValue	value	Set the component value.

ComboGrid

Extend from $.fn.combo.defaults and $.fn.datagrid.defaults. Override defaults with $.fn.combogrid.defaults.

Dependencies

• combo
• datagrid

Usage

1. <select id="cc" name="dept" style="width:250px;"></select>  

1. <input id="cc" name="dept" value="01">  

1. $('#cc').combogrid({   
2.     panelWidth:450,   
3.     value:'006',   
4.     
5.     idField:'code',   
6.     textField:'name',   
7.     url:'datagrid_data.json',   
8.     columns:[[   
9.         {field:'code',title:'Code',width:60},   
10.         {field:'name',title:'Name',width:100},   
11.         {field:'addr',title:'Address',width:120},   
12.         {field:'col4',title:'Col41',width:100}   
13.     ]]   
14. });  

Properties

The properties extend from combo and datagrid, below is the added properties for combogrid.

Name	Type	Description	Default
loadMsg	string	The message displayed when datagrid load remote data.	null
idField	string	The id field name.	null
textField	string	The text field to be displayed in textbox.	null
mode	string	Defines how to load datagrid data when text changed. Set to 'remote' if the combogrid loads from server.	local
filter	function(q, row)	Defines how to select the local data when 'mode' setted to 'local'. Return true to select the row.

Events

The events extend from combo and datagrid.

Methods

The methods extend from combo, below is the added or overriden methods for combogrid.

Name	Parameter	Description
options	none	Return the options object.
grid	none	Return the datagrid object.
setValues	values	Set the component value array.
setValue	value	Set the component value.
clear	none	Clear the component value.

NumberBox

Extend from $.fn.validatebox.defaults. Override defaults with $.fn.numberbox.defaults.

Dependencies

• validatebox

Usage

1. <input type="text" id="nn"></input>  

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

Properties

The properties extend from validatebox, below is the added properties for numberbox.

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.	0

Methods

The methods extend from validatebox, below is the added or overridden methods for numberbox.

Name	Parameter	Description
disable	none	Disable the field.
enable	none	Enable the field.
fix	none	Fix the value to valid value.

DateBox

Extend from $.fn.combo.defaults. Override defaults with $.fn.datebox.defaults

Dependencies

• combo
• calendar

Usage

1. <input id="dd" type="text"></input>  

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

Properties

The properties extend from combo, below is the added properties for datebox.

Name	Type	Description	Default
panelWidth	number	The drop down calendar panel width.	180
panelHeight	number	The drop down calendar panel height.	auto
currentText	string	The text to display for the current day button.	Today
closeText	string	The text to display for the close button.	Close
okText	string	The text to display for the ok button.	Ok
disabled	boolean	When true to disable the field.	false
formatter	function	A function to format the date, the function take a 'date' parameter and return a string value.
parser	function	A function to parse a date string, the function take a 'date' string and return a date value.

Events

Name	Parameters	Description
onSelect	date	Fires when user select a date.

Methods

The methods extend from combo, below is the overridden methods for datebox.

Name	Parameter	Description
options	none	Return the options object.
calendar	none	Get the calendar object.
setValue	value	Set the datebox value.

DateTimeBox

Extend from $.fn.datebox.defaults, Override defaults with $.fn.datetimebox.defaults.

Dependencies

• datebox
• timespinner

Usage

1. <input id="dt" type="text"></input>  

1. $('#dt').datetimebox({   
2.     showSeconds:false  
3. });  

Properties

The properties extend from datebox, below is the added properties for datetimebox:

Name	Type	Description	Default
showSeconds	boolean	Defines if to display the second information.	true

Methods

The methods extend from datebox, below is the overridden methods for datetimebox.

Name	Parameter	Description
options	none	Return the options object.
spinner	none	Return the timespinner object.
setValue	value	Set the datetimebox value.

Calendar

Override defaults with $.fn.calendar.defaults.

Usage

1. <div id="cc" style="width:180px;height:180px;"></div>  

1. $('#cc').calendar({   
2.     width:600,   
3.     height:600,   
4.     current:new Date()   
5. });  

Properties

Name	Type	Description	Default
width	number	The width of calendar component.	180
height	number	The height of calendar component.	180
fit	boolean	When true to set the 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.

Methods

Name	Parameter	Description
options	none	Return the options object.
resize	none	Resize the calendar size.
moveTo	date	Move the calendar to specified date.

Spinner

Extend from $.fn.validatebox.defaults. Override defaults with $.fn.spinner.defaults.

Dependencies

• validatebox

Usage

1. <input id="ss" value="2">  

Properties

The properties extend from validatebox, below is the added properties for spinner.

Name	Type	Description	Default
width	number	The width of this component.	auto
value	string	The initialize value.
min	string	The minimum allowed value.	null
max	string	The maximum allowed value.	null
increment	number	The increment value when click spinner button.	1
editable	boolean	Defines if user can type value directly into the field.	true
disabled	boolean	Defines if to disable the field.	false
spin	function(down)	A function called when user click the spinner button.

Events

Name	Parameters	Description
onSpinUp	none	Fires when user click the up spinner button.
onSpinDown	none	Fires when user click the down spinner button.

Methods

The methods extend from validatebox, below is the added methods for spinner.

Name	Parameter	Description
options	none	Return the options object.
destroy	none	Destroy the spinner component.
resize	width	Reset the component width.
enable	none	Enable the component.
disable	none	Disable the component.
getValue	none	Get the component value.
setValue	value	Set the component value.
clear	none	Clear the component value.

NumberSpinner

Extend from $.fn.spinner.defaults and $.fn.numberbox.defaults. Override defaults with $.fn.numberspinner.defaults.

Dependencies

• spinner
• numberbox

Usage

1. <input id="ss" min="10" max="100" required="true" style="width:80px;">  

Properties

The properties extend from spinner and numberbox.

Events

The events extend from spinner.

Methods

The methods extend from spinner, below is the overridden methods for numberspinner.

Name	Parameter	Description
options	none	Return the options object.
setValue	value	Set the numberspinner value.

Window

Window

Extend from $.fn.panel.defaults. Override defaults with $.fn.window.defaults.

Dependencies

• draggable
• resizable
• panel

Usage

1. <div id="win" iconCls="icon-save" title="My Window">  
2.   Window Content  
3. </div>  

1. $('#win').window({  
2.     width:600,  
3.     height:400,  
4.     modal:true  
5. });  
6. $('#win').window('close');  // close window  

Properties

The properties extend from panel, below is the overridden and added properties for window.

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
closed	boolean	Defined if to close the window.	false
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
inline	boolean	Defines how to stay the window, true to stay inside its parent, false to go on top of all elements.	false
modal	boolean	Defines if window is a modal window.	true

Events

The events extend from panel.

Methods

The methods extend from panel, below is the added methods for window.

Name	Parameter	Description
window	none	Return the window object.

Dialog

Extend from $.fn.window.defaults. Override defaults with $.fn.dialog.defaults.

Dependencies

• window
• linkbutton

Usage

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

1. $('#dd').dialog({  
2.     modal:true  
3. });  

Properties

The properties extend from window, below is the overridden properties for dialog.

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
toolbar	array	The top toolbar of dialog, each tool options is same as linkbutton.	null
buttons	array	The bottom buttons of dialog, each button options is same as linkbutton.	null

Events

The events extend from window.

Methods

The methods extend from window, below is the added methods for dialog.

Name	Parameter	Description
dialog	none	Return the dialog object.

Messager

Override defaults with $.messager.defaults.

Dependencies

• window
• linkbutton
• progressbar

Usage

1. $.messager.alert('Warning','The warning message');  
2. $.messager.confirm('Confirm','Are you sure you want to delete record?',function(r){  
3.     if (r){  
4.         alert('ok');  
5.     }  
6. });  

Properties

Name	Type	Description	Default
ok	string	The Ok button text.	Ok
cancel	string	The Cancel button text.	Cancel

Methods

Name	Parameters	Description
$.messager.show	options	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. 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.
$.messager.alert	title, msg, icon, fn	Show an alert window. Parameters: title: The title text to be showed on header panel. 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.
$.messager.confirm	title, msg, fn	Show a confirmation message window with Ok and Cancel buttons. Parameters: title: The title text to be showed on header 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.
$.messager.prompt	title, msg, fn	Show a message window with Ok and Cancel buttons prompting user to enter some text. Parameters: 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.
$.messager.progress	options or method	Show a progress message window. The options is defined as: title: The title text to be showed on header panel, default ''. msg: The message box body text, default ''. text: The text to display in the progress bar, default undefined. interval: The length of time in milliseconds between each progress update, default 300. The method is defined as: bar: Get the progressbar object. close: Close the progress window. Code Example Show progress message window. $.messager.progress(); Now close the message window. $.messager.progress('close');

DataGrid and Tree

DataGrid

Extend from $.fn.panel.defaults. Override defaults with $.fn.datagrid.defaults.

Dependencies

• panel
• resizable
• linkbutton
• pagination

Usage

1. <table id="tt"></table>  

1. $('#tt').datagrid({  
2.     url:'datagrid_data.json',  
3.     columns:[[  
4.         {field:'code',title:'Code',width:100},  
5.         {field:'name',title:'Name',width:100},  
6.         {field:'price',title:'Price',width:100,align:'right'}  
7.     ]]  
8. });  

DataGrid Properties

The properties extend from panel. below is the added properties for datagrid.

Name	Type	Description	Default
columns	array	The datagrid columns config object, see column properties for more details.	null
frozenColumns	array	Same as the columns property, but the these columns will be frozen on left.	null
fitColumns	boolean	True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling.	false
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
loadMsg	string	When loading data from 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
pageNumber	number	When set pagination property, initialize the page number.	1
pageSize	number	When set pagination property, initialize the page size.	10
pageList	array	When set pagination property, initialize the page size selecting list.	[10,20,30,40,50]
queryParams	object	When request remote data, 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
showFooter	boolean	Defines if to show row footer.	false
rowStyler	function	Return style such as 'background:red'. The function take two parameter: rowIndex: the row index, start with 0 rowData: the record corresponding to this row
loadFilter	function	Return the filtered data to display. The function take one parameter 'data' that indicate the original data. You can change original source data to standard data format. This function must return standard data object that contain 'total' and 'rows' properties.
editors	object	Defines the editor when editing a row.	predefined editors
view	object	Defines the view of datagrid.	default view

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:

1. columns:[[  
2.     {field:'itemid',title:'Item ID',rowspan:2,width:80,sortable:true},  
3.     {field:'productid',title:'Product ID',rowspan:2,width:80,sortable:true},  
4.     {title:'Item Details',colspan:4}  
5. ],[  
6.     {field:'listprice',title:'List Price',width:80,align:'right',sortable:true},  
7.     {field:'unitcost',title:'Unit Cost',width:80,align:'right',sortable:true},  
8.     {field:'attr1',title:'Attribute',width:100},  
9.     {field:'status',title:'Status',width:60}  
10. ]]  

Name	Type	Description	Default
title	string	The column title text.	undefined
field	string	The column field name.	undefined
width	number	The width of column.	undefined
rowspan	number	Indicate how many rows a cell should take up.	undefined
colspan	number	Indicate how many columns a cell should take up.	undefined
align	string	Indicate how to align the column data. 'left','right','center' can be used.	undefined
sortable	boolean	True to allow the column can be sorted.	undefined
resizable	boolean	True to allow the column can be resized.	undefined
hidden	boolean	True to hide the column.	undefined
checkbox	boolean	True to show a checkbox.	undefined
formatter	function	The cell formatter function, take three parameter: value: the field value. rowData: the row record data. rowIndex: the row index.	undefined
styler	function	The cell styler function, return style string to custom the cell style such as 'background:red'. The function take three parameter: value: the field value. rowData: the row record data. rowIndex: the row index.	undefined
sorter	function	The custom field sort function, take two parameters: a: the first field value. b: the second field value.	undefined
editor	string,object	Indicate the edit type. When string indicates the edit type, when object contains two properties: type: string, the edit type, possible type is: text,textarea,checkbox,numberbox,validatebox,datebox,combobox,combotree. options: object, the editor options corresponding to the edit type.	undefined

Editor

Override defaults with $.fn.datagrid.defaults.editors.

Every editor has following actions:

Name	Parameters	Description
init	container, options	Initialize the editor and return the target object.
destroy	target	Destroy the editor if necessary.
getValue	target	Get value from editor text.
setValue	target , value	Set value for editor.
resize	target , width	Resize the editor if necessary.

For example, the text editor is defined as following:

1. $.extend($.fn.datagrid.defaults.editors, {  
2.     text: {  
3.         init: function(container, options){  
4.             var input = $('<input type="text" class="datagrid-editable-input">').appendTo(container);  
5.             return input;  
6.         },  
7.         getValue: function(target){  
8.             return $(target).val();  
9.         },  
10.         setValue: function(target, value){  
11.             $(target).val(value);  
12.         },  
13.         resize: function(target, width){  
14.             var input = $(target);  
15.             if ($.boxModel == true){  
16.                 input.width(width - (input.outerWidth() - input.width()));  
17.             } else {  
18.                 input.width(width);  
19.             }  
20.         }  
21.     }  
22. });  

DataGrid View

Override defaults with $.fn.datagrid.defaults.view.

The view is an object that will tell datagrid how to render rows. The object must defines the following functions:

Name	Parameters	Description
render	target, container, frozen	Called when the data is loaded. target: DOM object, the datagrid object. container: the rows container. frozen: indicate if to render the frozen container.
renderFooter	target, container, frozen	This is an option function to render row footer.
renderRow	target, fields, frozen, rowIndex, rowData	This is an option function and will be called by render function.
refreshRow	target, rowIndex	Defines how to refresh the specified row.
onBeforeRender	target, rows	Fires before the view is rendered.
onAfterRender	target	Fires after the view is rendered.

Events

The events extend from panel, below is the added events for datagrid.

Name	Parameters	Description
onLoadSuccess	data	Fires when data is loaded successfully.
onLoadError	none	Fires when some error occur to load remote data.
onBeforeLoad	param	Fires before a request is made to load data. If return false the load action will be canceled.
onClickRow	rowIndex, rowData	Fires when user click a row, the parameters contains: rowIndex: the clicked row index, start with 0 rowData: the record corresponding to the clicked row
onDblClickRow	rowIndex, rowData	Fires when user dblclick a row, the parameters contains: rowIndex: the clicked row index, start with 0 rowData: the record corresponding to the clicked row
onClickCell	rowIndex, field, value	Fires when user click a cell.
onDblClickCell	rowIndex, field, value	Fires when user dblclick a cell.
onSortColumn	sort, order	Fires when user sort a column, the parameters contains: sort: the sort column field name order: the sort column order
onResizeColumn	field, width	Fires when user resize the column.
onSelect	rowIndex, rowData	Fires when user select a row, the parameters contains: rowIndex: the selected row index, start with 0 rowData: the record corresponding to the selected row
onUnselect	rowIndex, rowData	Fires when user unselect a row, the parameters contains: rowIndex: the unselected row index, start with 0 rowData: the record corresponding to the unselected row
onSelectAll	rows	Fires when user select all rows.
onUnselectAll	rows	Fires when user unselect all rows.
onBeforeEdit	rowIndex, rowData	Fires when user start editing a row, the parameters contains: rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row
onAfterEdit	rowIndex, rowData, changes	Fires when user finish editing, the parameters contains: rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row changes: the changed field/value pairs
onCancelEdit	rowIndex, rowData	Fires when user cancel editing a row, the parameters contains: rowIndex: the editing row index, start with 0 rowData: the record corresponding to the editing row
onHeaderContextMenu	e, field	Fires when the header of datagrid is right clicked.
onRowContextMenu	e, rowIndex, rowData	Fires when a row is right clicked.

Methods

Name	Parameter	Description
options	none	Return the options object.
getPager	none	Return the pager object.
getPanel	none	Return the panel object.
getColumnFields	frozen	Return the column fields. If frozen setted to true the frozen column fields is returned.
getColumnOption	field	Return the specified column option.
resize	param	Do resize and do layout.
load	param	Load and show the first page rows. If the 'param' is specified, it will replace with the queryParams property.
reload	param	Reload the rows. Same as the 'load' method but stay on current page.
reloadFooter	footer	Reload the footer rows.
loading	none	Display loading status.
loaded	none	Hide loading status.
fitColumns	none	Make columns auto expand/collapse to fit datagrid width.
fixColumnSize	none	fix columns size.
fixRowHeight	index	fix the specified row height.
loadData	data	Load local data, the old rows will be removed.
getData	none	Return the loaded data.
getRows	none	Return the current page rows.
getFooterRows	none	Return the footer 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.
unselectAll	none	Unselect 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.
getEditors	index	Get the specified row editors. Each editor has the following properties: actions: the actions that the editor can do. target: the target editor jQuery object. field: the field name. type: the editor type.
getEditor	options	Get the specified editor, the options contains two properties: index: the row index. field: the field name.
refreshRow	index	Refresh a row.
validateRow	index	validate the specified row, return true when valid.
updateRow	param	Update the specified row, the param contains following properties: index: the row index to be updated. row: the new row data.
appendRow	row	Append a new row.
insertRow	param	Insert a new row, the param contains following properties: index: the row index to insert into, if not defined, append the new row. row: the row data.
deleteRow	index	Delete a row.
getChanges	type	Get changed rows since the last commit. The type parameter indicate which type changed rows, 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.
mergeCells	options	Merge some cells to one cell, the options contains following properties: index: the row index. field: the field name. rowspan: the rowspan count to be merged. colspan: the colspan count to be merged.
showColumn	field	Display the specified column.
hideColumn	field	Hide the specified column.

PropertyGrid

Extend from $.fn.datagrid.defaults. Override defaults with $.fn.propertygrid.defaults.

Dependencies

• datagrid

Usage

1. <table id="pg"></table>  

1. $('#pg').propertygrid({  
2.     url:'propertygrid_data.json',  
3.     showGroup:true  
4. });  

Properties

The properties extend from datagrid, below is the added properties for propertygrid.

Name	Type	Description	Default
showGroup	boolean	Defines if to show property group.	false
groupField	string	Defines the group field name.	group
groupFormatter	function	Defines how to format the group value.

Tree

Override defaults with $.fn.tree.defaults.

Dependencies

• draggable
• droppable

Usage

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

1. <ul id="tt">  
2.     <li>  
3.         <span>Folder</span>  
4.         <ul>  
5.             <li>  
6.                 <span>Sub Folder 1</span>  
7.                 <ul>  
8.                     <li>  
9.                         <span><a href="#">File 11</a></span>  
10.                     </li>  
11.                     <li>  
12.                         <span>File 12</span>  
13.                     </li>  
14.                     <li>  
15.                         <span>File 13</span>  
16.                     </li>  
17.                 </ul>  
18.             </li>  
19.             <li>  
20.                 <span>File 2</span>  
21.             </li>  
22.             <li>  
23.                 <span>File 3</span>  
24.             </li>  
25.         </ul>  
26.     </li>  
27.     <li>  
28.         <span>File21</span>  
29.     </li>  
30. </ul>  

Tree can also be defined in an empty <ul> element:

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

1. $('#tt').tree({  
2.     url:'tree_data.json'  
3. });  

Tree data format

Every node can contains following properties:

• 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:

1. [{  
2.     "id":1,  
3.     "text":"Folder1",  
4.     "iconCls":"icon-save",  
5.     "children":[{  
6.         "text":"File1",  
7.         "checked":true  
8.     },{  
9.         "text":"Books",  
10.         "state":"open",  
11.         "attributes":{  
12.             "url":"/demo/book/abc",  
13.             "price":100  
14.         },  
15.         "children":[{  
16.             "text":"PhotoShop",  
17.             "checked":true  
18.         },{  
19.             "id": 8,  
20.             "text":"Sub Bookds",  
21.             "state":"closed"  
22.         }]  
23.     }]  
24. },{  
25.     "text":"Languages",  
26.     "state":"closed",  
27.     "children":[{  
28.         "text":"Java"  
29.     },{  
30.         "text":"C#"  
31.     }]  
32. }]  

Properties

Name	Type	Description	Default
url	string	a URL to retrieve remote data.	null
method	string	The http method to retrieve data.	post
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
cascadeCheck	boolean	Defines if to cascade check.	true
onlyLeafCheck	boolean	Defines if to show the checkbox only before leaf node.	false
dnd	boolean	Defines if to enable drag and drop.	false
data	array	The node data to be loaded.	null

Events

Many events callback function can take the 'node' parameter, 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.

Name	Parameters	Description
onClick	node	Fires when user click a node, the node parameter contains following properties: id: the node id 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.
onLoadError	arguments	Fires when data loaded fail, the 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.
onCheck	node, checked	Fires when users click the checkbox.
onBeforeSelect	node	Fires before node is selected, return false to cancel this select action.
onSelect	node	Fires when node is selected.
onContextMenu	e, node	Fires when node is right clicked.
onDrop	target, source, point	Fires when a node is dropped. target: DOM object, The node being targeted for the drop. source: the source node. point: indicate the drop operation, posible values are: 'append','top' or 'bottom'.
onBeforeEdit	node	Fires before edit node.
onAfterEdit	node	Fires after edit node.
onCancelEdit	node	Fires when cancel the editing action.

Methods

Name	Parameter	Description
options	none	Return the options of tree.
loadData	data	Load the tree data.
getNode	target	get the specified node object.
getData	target	get the specified node data, including its children.
reload	target	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	target	Collapse all nodes.
expandAll	target	Expand all nodes.
expandTo	target	Expand from root to specified node.
append	param	Append some children nodes to a parent node. param parameter has two properties: 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.
insert	param	Insert a node to before or after specified node. the 'param' parameter contains following properties: before: DOM object, the node to insert before. after: DOM object, the node to insert after. data: object, the node data.
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	param	Update the specified node. param has following properties: target(DOM object, the node to be updated),id,text,iconCls,checked,etc.
enableDnd	none	Enable drag and drop feature.
disableDnd	none	Disable drag and drop feature.
beginEdit	nodeEl	Begin editing a node.
endEdit	nodeEl	End editing a node.
cancelEdit	nodeEl	Cancel editing a node.

TreeGrid

Extend from $.fn.datagrid.defaults. Override defaults with $.fn.treegrid.defaults.

Dependencies

• datagrid

Usage

1. <table id="tt"></table>  

1. $('#tt').treegrid({  
2.     url:'treegrid_data.json',  
3.     treeField:'name',  
4.     columns:[[  
5.         {title:'Task Name',field:'name',width:180},  
6.         {field:'persons',title:'Persons',width:60,align:'right'},  
7.         {field:'begin',title:'Begin Date',width:80},  
8.         {field:'end',title:'End Date',width:80}  
9.     ]]  
10. });  

Properties

The properties extend from datagrid, below is the added properties for treegrid.

Name	Type	Description	Default
treeField	string	Defines the tree node field.	null
animate	boolean	Defines if to show animation effect when node expand or collapse.	false

Events

The events extend from datagrid, below is the added events for treegrid.

Name	Parameters	Description
onClickRow	row	Fires when user click a node.
onDblClickRow	row	Fires when user dblclick a node.
onBeforeLoad	row, param	Fires before a request is made to load data, return false to cancel this load action.
onLoadSuccess	row, data	Fires when data loaded successfully.
onLoadError	arguments	Fires when data loaded fail, the arguments parameter is same as the 'error' function of jQuery.ajax.
onBeforeExpand	row	Fires before node is expanded, return false to cancel this expand action.
onExpand	row	Fires when node is expanded.
onBeforeCollapse	row	Fires before node is collapsed, return false to cancel this collapse action.
onCollapse	row	Fires when node is collapsed.
onContextMenu	e, row	Fires when node is right clicked.
onBeforeEdit	row	Fires when user start editing a node.
onAfterEdit	row,changes	Fires when user finish editing.
onCancelEdit	row	Fires when user cancel editing a node.

Methods

Name	Parameter	Description
options	none	Return the options of treegrid.
resize	options	Set treegrid size, the options contains two properties: width: the new width of treegrid. height: the new height of treegrid.
fixRowHeight	id	fix the specified row height.
loadData	data	Load the treegrid data.
reload	id	Reload treegrid data.
reloadFooter	footer	Reload footer data.
getData	none	Get the loaded data.
getFooterRows	none	Get the footer data.
getRoot	none	Get the root node, return node object
getRoots	none	Get the root nodes, return node array.
getParent	id	Get the parent node.
getChildren	id	Get the children nodes.
getSelected	none	Get the selected node and return it, if no node selected return null.
getSelections	none	Get all selected nodes.
getLevel	id	Get the specified node level.
find	id	Find the specifed node and return the node data.
select	id	Select a node.
unselect	id	Unselect a node.
selectAll	none	Select all nodes.
unselectAll	none	Unselect all nodes.
collapse	id	Collapse a node.
expand	id	Expand a node.
collapseAll	id	Collapse all nodes.
expandAll	id	Expand all nodes.
expandTo	id	Expand from root to specified node.
toggle	id	Toggles expanded/collapsed state of the node.
append	param	Append nodes to a parent node. The 'param' parameter contains following properties: parent: DOM object, the parent node to append to, if not assigned, append as root nodes. data: array, the nodes data.
remove	id	Remove a node and it's children nodes.
refresh	id	Refresh the specified node.
beginEdit	id	Begin editing a node.
endEdit	id	End editing a node.
cancelEdit	id	Cancel editing a node.
getEditors	id	Get the specified row editors. Each editor has the following properties: actions: the actions that the editor can do. target: the target editor jQuery object. field: the field name. type: the editor type.
getEditor	options	Get the specified editor, the options contains two properties: id: the row node id. field: the field name.