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.
If you want to discuss contents of this page - this is the easiest way to do it.
Click here to edit contents of this page.
Click here to toggle editing of individual sections of the page (if possible). Watch headings for an "edit" link when available.
Append content without editing the whole page source.
Check out how this page has evolved in the past.
View and manage file attachments for this page.
A few useful tools to manage this Site.
See pages that link to and include this page.
Change the name (also URL address, possibly the category) of the page.
View wiki source for this page without editing.
View/set parent page (used for creating breadcrumbs and structured layout).
Notify administrators if there is objectionable content in this page.
Something does not work as expected? Find out what you can do.
General Wikidot.com documentation and help section.
Wikidot.com Terms of Service - what you can, what you should not etc.
Wikidot.com Privacy Policy.
o 10.2 layout
§ 10.2.1Panel
Usage
Markup
Many panel properties can be defined in
markup.
Panel Content
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.
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
none
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
forceCollapse
Collapses the panel body. When forceCollapse is setted to true, the onBeforeCollapse event will not be triggered.
expand
forceExpand
Expand the panel body. When forceExpand is setted to true, the onBeforeExpand event will not be triggered.
§ 10.2.2 tabs
Usage
Markup
tab1
tab2
tab3
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
});
To get the selected tab panel and its tab object:
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
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
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
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
width
number
The width of tab panel.
auto
height
number
The height of tab panel.
auto
§ 10.2.3 accordion
Usage
Markup
Accordion for jQuery
Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.
content2
content3
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
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.
§ 10.2.4 layout
Usage
Markup
The layout panel must has one 'center' panel.
jQuery
$('#cc').layout(options);
Dependencies
panel
resizable
Options
Layout Panel Options
All the properties is defined on
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'.
o 10.3 Menu and button
Usage
Markup
New
Open
Word
Excel
PowerPoint
Save
Exit
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.
0
top
number
Menu top position.
0
href
string
Indicate a different page URL that can be displayed 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
pos
Show a menu on special position. pos parameter have two properties: left: the new left position. top: the new top position.
Defines duration time in milliseconds to show menu when hovering the button.
100
o 10.4 form
Usage
Markup
...
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
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 submit: 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.
combobox
Usage
Markup
jQuery
$('#cc').combobox(options);
To create from remote data:
$('#cc').combobox({
url:'combobox_data.json',
valueField:'id',
textField:'text'
});
The remote data format sample:
[{
"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.
setValue
param
Set the specified value into the field. The '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
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.
setValue
param
Set the specified value into the field. The 'param' parameter can be a tree node id value or a javascript object that contains two properties: id and text.
The maximum precision to display after the decimal separator.
0
Methods
validatebox
Usage
Markup
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:
In the above code, we define a input box that should be inputed at least 5 characters.
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
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.
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
Name
Parameter
Description
destroy
none
Destroy the component.
disable
none
Disable the field.
enable
none
Enable the field.
calendar
Usage
Markup
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
fit
boolean
When true to set the calendar size fit it's parent container.
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.
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.
A CSS class that will provide a 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
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
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
fit
boolean
True to set size to fit it's parent container.
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
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:
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
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
sorter
function
The custom field sort function, take three parameter: a: the first field value. b: the second field value. order: the sort order, 'asc' or 'desc'.
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 default with $.fn.datagrid.defaults.editors. Every editor has following functions:
Name
Parameters
Description
init
container, options
Initialize and create the editor.
destroy
elem
Destroy the editor if necessary.
getValue
elem
Get value from editor text.
setValue
elem, value
Set value for editor.
resize
elem, width
Resize the editor if necessary.
For example, the text editor is defined as following:
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
onSortColumn
sort, order
Fires when user sort a column, the parameters contains: sort: the sort column field name order: the sort column order
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
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
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.
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.
tree
Usage
Markup
Tree can be definded in
element. The markup can defines leaf and children, bellow is an example:
Folder
Sub Folder 1
File 12
File 13
File 2
File 3
File21
Tree can also be defined in an empty
element:
jQuery
$('#tt').tree(options);
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:
[{
"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
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.
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
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.
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.
