Initializer
.ojTree(options)
Parameters:
Name | Type | Argument | Description |
---|---|---|---|
options |
Object |
<optional> |
a map of option-value pairs to set on the component |
- Source:
- ojtree/ojtree.js, line 347
Example
Initialize the Tree with options:
$( ".selector" ).ojTree( {"animDuration": 0, "selectionMode": "single"} );
Options
-
#animDuration :number
-
Specifies an animation duration in milliseconds for expanding or collapsing a node. Specify zero to inhibit animation.
- Default Value:
500
- Source:
- ojtree/ojtree.js, line 644
-
#contextMenu :string|null
-
Identifies the JET Menu that the component should launch as a context menu on right-click or Shift-F10. If specified, the browser's native context menu will be replaced by the specified JET Menu.
To specify a JET context menu on a DOM element that is not a JET component, see the
ojContextMenu
binding.To make the page semantically accurate from the outset, applications are encouraged to specify the context menu via the standard HTML5 syntax shown in the below example. When the component is initialized, the context menu thus specified will be set on the component.
When defining a contextMenu, ojTree will provide built-in behavior for "edit" style functionality (e.g. cut/copy/paste) if the following format for menu <li> item's is used (no <a> elements are required):
- <li data-oj-command="oj-tree-cut" />
- <li data-oj-command="oj-tree-copy" />
- <li data-oj-command="oj-tree-paste" />
- <li data-oj-command="oj-tree-remove" />
- <li data-oj-command="oj-tree-rename" />
The JET Menu should be initialized before any component using it as a context menu.
- Default Value:
null
- Source:
- ojtree/ojtree.js, line 569
Examples
Initialize a JET Tree with a context menu:
// via recommended HTML5 syntax: <div id="myTree" contextmenu="myMenu" data-bind="ojComponent: { ... }> // via JET initializer (less preferred) : $( ".selector" ).ojTree({ "contextMenu": "#myContextMenu" ... } });
Get or set the
contextMenu
option for an ojTree after initialization:// getter var menu = $( ".selector" ).ojTree( "option", "contextMenu" ); // setter $( ".selector" ).ojTree( "option", "contextMenu", "#myContextMenu"} );
-
#data :Object|Array|string|null
-
Specifies the data source used to populate the tree. Currently supported data sources are a
JsonTreeDataSource
, or json, or html. The general format of thedata
option is one of the following:- data : oj.JsonTreeDataSource
- data : null (or omit) - ojTree will look at the containing <div> and use any existing html <ul> markup found
- data : " json string "
- data : [ array of json objects ]
- data : "<ul><li> ... html markup string </ul>"
- data : { "data" : ... or "ajax" : . . . } // retrieve json or html
"data"
property of thedata
option, specifies that the tree is to be populated from JSON or HTML (local or remote). The"data"
object contains one of two properties:- "data"
- "ajax"
"dataType"
property may also be specified, which can take the value"json"
or"html"
, and indicates what kind of data is being returned in the"data"
or"ajax"
method (default is "json"). When "data" is specified as an object, its "data" property may be specified as a function which receives two arguments: node, and fn. Example: Skeleton outline of a"data"
function:data : { "data" : function(node, fn) { // node - the jQuery wrapped node to be expanded for a lazy load, // or -1 if it is the initial call to load the tree. // fn - a function to call with the JSON to be applied. fn( new_json_node_data ) ; // return the JSON } }
"ajax"
property of the"data"
option allows remote JSON to be retrieved. It may be specified as an object (refer to the jQuery .ajax() settings object). If may also be specified asfalse
or omitted, if no AJAX operations are performed. When specified as an object, it should contain the following two properties:- type
- url
"ajax" : { "type": "GET", "url": "my_url" // some url to the content }
"url"
may also be specified as a function which should return a url string:"ajax" : { "type" : "GET", "url": function (node) { ... return a url string ... } )
- Default Value:
null
- Source:
- ojtree/ojtree.js, line 988
Examples
Example 1: Skeleton outline of success and error functions
"ajax": { "type":"GET", "url": myurl <-- url to full tree JSON "success" : function(data, status, obj) { // data = the JSON data // status = "success" // obj = the AJAX object. trace("Ajax " + status) ; // return the data, can transform it first if required ; }, "error" : function(reason, feedback, obj) { // reason e.g. "parsererror" // feedback.message e.g. "unexpected string" // obj = the AJAX object. trace("Ajax error " + reason + " feedback=" + feedback.message) ; },
Example 2: Load the complete tree from locally defined JSON.
"data" : [ { "title": "Home", "attr": {"id": "home"}, }, { "title": "News", "attr": {"id": "news"} }, { "title": "Blogs", "attr": {"id": "blogs"}, "children": [ { "title": "Today", "attr": {"id": "today"} }, { "title": "Yesterday", "attr": {"id": "yesterday"} } ] } ]
Example 3: Load the complete tree with remotely served JSON.
"data" : { "ajax": { "type":"GET", "url": myurl <-- url to full tree JSON } }
Example 4: Load the complete tree with remotely served JSON via a function.
"data" : { "ajax": { "type":"GET", "url": function() { return (a url) ; } } }
Example 5: Load a partial tree, and retrieve node data when a parent node is expanded and needs to be populated.
"data" : { "ajax": { "type":"GET", "url": function(node) { if (node === -1) { // -1 indicates initial load return (url for for partial json) ; // the tree outline with parent nodes empty. } else { var id = node.attr("id") ; return (a url based on the node id to retrieve just the node children) ; } } } }
Example 6: Transform data received from server before passing to ojTree.
"data" : { "ajax": { "type":"GET", "url": function(node) { . . . }, "success" : function (data) { . . . // transform the received data into node JSON format return (transformed data) ; }, "error" : function () { // ajax call failed. } } }
Example 7: Use own mechanism to load a partial tree and retrieve node data when a parent is expanded.
// Sample outline of a tree. Note that the parent nodes "Node2" and "Node3" have // their "children" property specifed, but no children are actually defined. { "title" : Node1", "attr" : {"id" : "n1"} }, { "title" : Node2", "attr" : {"id" : "n2"}, "children" : [] }, { "title" : Node3", "attr" : {"id" : "n3"}, "children" : [] }, "data" : { "data": function(node, fn) { // node = the node whose children are to be retrieved // fn = the function to call with the retrieved node json if (node === -1) { // initial tree load fn( acquired node json for the tree) ; } else { // node lazy load var id = node.attr("id") ; // get the node id, will be "n2" // or "n3", in this example. fn( acquired node json for the expanded node ) ; } } } }
-
#disabled :boolean
-
Disables the tree if set to
true
.- Default Value:
false
- Source:
- ojtree/ojtree.js, line 566
Examples
Initialize the tree with the
disabled
option specified:$( ".selector" ).ojTree( { "disabled": true } );
Get or set the
disabled
option, after initialization:// getter var disabled = $( ".selector" ).ojTree( "option", "disabled" ); // setter $( ".selector" ).ojTree( "option", "disabled", true );
-
#dnd :Object|boolean
-
Specifies whether the user is permitted to reorder the nodes within the same tree using drag and drop. Specify an object with the property "reorder" set to
true
to enable reordering. Setting the"reorder"
property tofalse
, or setting the"dnd"
property tofalse
(or omitting it), disables reordering support.- Default Value:
false
- Source:
- ojtree/ojtree.js, line 664
Example
Example: Enable drag and drop for tree node reordering
dnd : ( "reorder" : true }
-
#emptyText :string|null
-
The text to display when there are no data in the Tree. If not specified, default text is extracted from the resource bundle. Specify an empty string if this default behavior is not required.
- Default Value:
"No data"
- Source:
- ojtree/ojtree.js, line 1004
Example
Initialize the tree with text set to 'no data':
$( ".selector" ).ojTree({ "data":data, "emptyText": "no data" });
-
#expandParents :boolean
-
Specify true if expanding a node programatically should also expand its parents (i.e all parent nodes down to this node will be expanded).
- Default Value:
false
- Source:
- ojtree/ojtree.js, line 675
-
#icons :boolean
-
Specifies whether node icons are to be displayed. Specify true to display icons, or false to suppress node icons.
- Default Value:
true
- Source:
- ojtree/ojtree.js, line 1017
-
#initExpanded :Array|null
-
Specifies whether any nodes should be initially expanded on start-up. Specify an array of node id's, or the string "all" if all parent nodes should be expanded. The value may optionally be specified as an empty array.
- Default Value:
null
- Source:
- ojtree/ojtree.js, line 687
-
#rootAttributes :Object|undefined
-
Attributes specified here will be set on the component's root DOM element at creation time. This is particularly useful for components like Dialog that wrap themselves in a root element at creation time.
The specified
class
andstyle
are appended to the current class and style, respectively. All other attributes overwrite any existing value.Setting this option after component creation has no effect.
- Default Value:
undefined
- Inherited From:
- Source:
- ojcomponentcore/jqueryui-base.js, line 77
Example
Initialize a JET component, specifying a set of attributes to be set on the component's root DOM element:
$( ".selector" ).ojFoo({ "rootAttributes": { 'id': 'myId', 'style': 'max-width:100%; color:blue;', 'class': 'my-class' }});
-
#selectedParentCollapse :boolean|string
-
Specifies what action is to be taken when a selected node's parent is collapsed. Specify false if nothing is to be done. Specify "selectParent" if the node's closed parent is to be selected, or specify "deselect" if the node is to be deselected.
- Default Value:
false
- Source:
- ojtree/ojtree.js, line 715
-
#selectedParentExpand :boolean
-
Specifies what action is to be taken when a node is programmatically expanded. Specify true if all of the node's closed parents should be opened automatically. If false is specified, the node is selected but will remain invisible if its parents are currently collapsed.
- Default Value:
true
- Source:
- ojtree/ojtree.js, line 728
-
#selectionMode :string
-
Specifies whether selection is permitted, and whether more than one node can be selected at a time. Values are "single" for single selection, "multiple" to allow multiple concurrent selections, and "none" to inhibit selection.
- Default Value:
"single"
- Source:
- ojtree/ojtree.js, line 702
-
#selectPrevOnDelete :boolean
-
Specifies the action to take when a selected node is deleted. If set to true, its previous sibling (or parent, if no previous siblings) is selected. If false is specified, no action is taken.
- Default Value:
false
- Source:
- ojtree/ojtree.js, line 740
-
#types :Object|null
-
The 'types' option allow nodes to be classified and their appearance and behavior modified. Typical uses are to define a specific icon for a particular node, or to inhibit certain operations on a particular type of folder (e.g. the root node cannot be deleted or moved).
A node type has the following properties:
- "image" - specifies the location of the icon to be used (optional). May also be specified as false to suppress the image.
- "position" - position of sprite in the image in the format "left top", e.g. "-36px -16px". Optional - omit if icon is not contained within a multi-sprite image.
- method name - specify a function or a boolean. Optional. Any node operation method (that is, takes a node as its first argument) can be redefined (e.g. select, expand, collapse, etc). Alternatively, the method can be defined as true or false to permit or inhibit the operation, or a function that returns a boolean value. The default value if omitted is true (i.e. the operation is permitted).
- Default Value:
true
- Source:
- ojtree/ojtree.js, line 1151
Examples
Example 1: Add custom appearance and node behavior.
"types": { "myroot" : { "image" : baseurl + "/img/root.png", "select" : function() { return false; }, "remove" : function() { return false; }, "move" : function() { return false; }, }, "myfolder" : { "image" : baseurl + "/img/folder.png" }, "myleaf" : { "image" : "baseurl + "/img/leaf.png" }, "default" : { <-- optional redefinition of the default behavior "image" : "baseurl + "/img/leaf.png", "remove" : function() { return false; } } } }
User-defined types are specified as an attribute of the node. The default node type attribute is "type", but this could be changed if desired using the "attr" property. Thus, for the node types in example 1 above, the node type attribute values in the node definitions could be set as in example 2:Example 2: Using node types in the tree JSON.
[ { "title": "Root", "attr": { "id": "root", "type": "myroot" <--- node type }, "children": [ { "title": "Home", "attr": {"id": "home", "type": "myleaf"} <--- node type }, { "title": "News", "attr": { "id": "news", "type": "myleaf" <--- node type } }, { "title": "Blogs", "attr": { "id": "blogs", "type": "myfolder" <--- node type }, "children": [ { "title": "Today", "attr": { "id": "today", "type": "myleaf" } }, { <--- default node type "title": "Yesterday", "attr": {"id": "yesterday"} } ] } ] } ]
As described above, the node type attribute used on the corresponding tree <li> element defaults to "type", but this can be redefined using the attr property as in the following example:Example 2: Using node types in the tree JSON.
"types": { "attr" : "mytype", <--- node type attribute is now "mytype" "types": { "myroot" : { "image" : . . . . . . } }
Events
-
#before
-
Triggered prior to an event.
- Source:
- ojtree/ojtree.js, line 1182
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description func
string the event causing this before
event to be triggered.Examples
Initialize the Tree with the
before
callback specified:$( ".selector" ).ojTree({ "before": function(event, ui) { console.log("Before event " + ui.func); } });
Bind an event listener to the
ojbefore
event:$( ".selector" ).on( "ojbefore", function( event, ui ) { console.log("Before event " + ui.func); });
-
#collapse
-
Triggered when a tree node is collapsed.
- Source:
- ojtree/ojtree.js, line 1204
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node that has been collapsed Examples
Initialize the Tree with the
collapse
callback specified:$( ".selector" ).ojTree({ "collapse": function( event, ui ) {. . .} });
Bind an event listener to the
ojcollapse
event:$( ".selector" ).on( "ojcollapse", function(event, ui) {. . .} );
-
#collapseAll
-
Triggered when all nodes of a parent node, or the complete tree, have been collapsed.
- Source:
- ojtree/ojtree.js, line 1248
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node(s) that were collapsed. targ
Object the node that was targeted for collapseAll, or -1 if the complete tree is collapsed. Examples
Initialize the Tree with the
collapseAll
callback specified:$( ".selector" ).ojTree({ "collapseAll": function( event, ui ) {. . .} });
Bind an event listener to the
ojcollapseall
event:$( ".selector" ).on( "ojcollapseall", function( event, ui ) {. . .} );
-
#create
-
Triggered when a tree node has been created and added to the tree.
- Source:
- ojtree/ojtree.js, line 1226
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node that has been created Examples
Initialize the Tree with the
create
callback specified:$( ".selector" ).ojTree({ "create": function( event, ui ) {. . .} });
Bind an event listener to the
ojcreate
event:$( ".selector" ).on( "ojcreate", function(event, ui) {. . .} );
-
#cut
-
Triggered when a tree node has been cut from the tree via the context menu.
- Source:
- ojtree/ojtree.js, line 1269
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node that was cut Examples
Initialize the Tree with the
cut
callback specified:$( ".selector" ).ojTree({ "cut": function( event, ui ) {. . .} });
Bind an event listener to the
ojcut
event:$( ".selector" ).on( "ojcut", function( event, ui ) {. . .} );
-
#dehover
-
Triggered when a tree node is no longer hovered over.
- Source:
- ojtree/ojtree.js, line 1290
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node that is no longer hovered over Examples
Initialize the Tree with the
dehover
callback specified:$( ".selector" ).ojTree({ "dehover": function( event, ui ) {. . .} });
Bind an event listener to the
ojdehover
event:$( ".selector" ).on( "ojdehover", function( event, ui ) {. . .} );
-
#deselect
-
Triggered when a tree node is deselected.
- Source:
- ojtree/ojtree.js, line 1335
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node that has become de-selected. Examples
Initialize the Tree with the
deselect
callback specified:$( ".selector" ).ojTree({ "deselect": function( event, ui ) {. . .} });
Bind an event listener to the
ojdeselect
event:$( ".selector" ).on( "ojdeselect", function( event, ui ) {. . .} );
-
#deselectAll
-
Triggered when all nodes of a parent node, or the complete tree, have been de-selected.
- Source:
- ojtree/ojtree.js, line 1357
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node(s) that have become de-selected. targ
Object the context node that was targeted for deselectAll, or -1 if the complete tree is deselected. Examples
Initialize the Tree with the
deselectAll
callback specified:$( ".selector" ).ojTree({ "deselectAll": function( event, ui ) {. . .} });
Bind an event listener to the
ojdeselectall
event:$( ".selector" ).on( "ojdeselectall", function( event, ui ) {. . .} );
-
#destroy
-
Triggered when a tree is destroyed.
- Source:
- ojtree/ojtree.js, line 1377
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Examples
Initialize the Tree with the
destroy
callback specified:$( ".selector" ).ojTree({ "destroy": function( event, ui ) {} });
Bind an event listener to the
ojdestroy
event:$( ".selector" ).on( "ojdestroy", function( event, ui ) {} );
-
#expand
-
Triggered when a tree node is expanded.
- Source:
- ojtree/ojtree.js, line 1398
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node that has been expanded Examples
Initialize the Tree with the
expand
callback specified:$( ".selector" ).ojTree({ "expand": function( event, ui ) {. . .} });
Bind an event listener to the
ojexpand
event:$( ".selector" ).on( "ojexpand", function( event, ui ) {. . .} );
-
#expandAll
-
Triggered when all nodes of a parent node, or the complete tree, have been expanded.
- Source:
- ojtree/ojtree.js, line 1420
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node(s) that were expanded. targ
Object the node that was targeted for expandAll, or -1 if the complete tree is collapsed. Examples
Initialize the Tree with the
expandAll
callback specified:$( ".selector" ).ojTree({ "expandAll": function( event, ui ) {. . .} });
Bind an event listener to the
ojexpandall
event:$( ".selector" ).on( "ojexpandall", function( event, ui ) {. . .} );
-
#hover
-
Triggered when a tree node is hovered over.
- Source:
- ojtree/ojtree.js, line 1441
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node that is hovered over Examples
Initialize the Tree with the
hover
callback specified:$( ".selector" ).ojTree({ "hover": function( event, ui ) {. . .} });
Bind an event listener to the
ojhover
event:$( ".selector" ).on( "ojhover", function( event, ui ) {. . .} );
-
#loaded
-
Triggered when a tree has been loaded and the node data has been applied.
- Source:
- ojtree/ojtree.js, line 1461
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Examples
Initialize the Tree with the
loaded
callback specified:$( ".selector" ).ojTree({ "loaded": function( event, ui ) {} });
Bind an event listener to the
ojloaded
event:$( ".selector" ).on( "ojloaded", function( event, ui ) {} );
-
#move
-
Triggered when a tree node has been moved within the tree.
- Source:
- ojtree/ojtree.js, line 1485
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node that was moved position
string the moved node's new position relative to the reference node. Can be "before", "after", or "inside". reference
Object the reference node that ui.position refers to. Examples
Initialize the Tree with the
move
callback specified:$( ".selector" ).ojTree({ "move": function(event, ui) {. . .} });
Bind an event listener to the
ojmove
event:$( ".selector" ).on( "ojmove", function(event, ui) {. . .} );
-
#paste
-
Triggered when a tree node has been pasted into the tree via the context menu.
- Source:
- ojtree/ojtree.js, line 1506
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node that was pasted Examples
Initialize the Tree with the
paste
callback specified:$( ".selector" ).ojTree({ "paste": function( event, ui ) {. . .} });
Bind an event listener to the
ojpaste
event:$( ".selector" ).on( "ojpaste", function( event, ui ) {. . .} );
-
#refresh
-
Triggered when a tree node, or the complete tree, has been refreshed.
- Source:
- ojtree/ojtree.js, line 1527
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node that has been refreshed, or -1 if the whole tree has been refreshed. Examples
Initialize the Tree with the
refresh
callback specified:$( ".selector" ).ojTree({ "refresh": function( event, ui ) {. . .} });
Bind an event listener to the
ojrefresh
event:$( ".selector" ).on( "ojrefresh", function( event, ui ) {. . .} );
-
#remove
-
Triggered when a tree node has been removed.
- Source:
- ojtree/ojtree.js, line 1314
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node that has been removed. parent
Object the parent of the node that was removed. prev
Object the previous sibling, or if ui.item is the first child of its parent, the parent node. Examples
Initialize the Tree with the
remove
callback specified:$( ".selector" ).ojTree({ "remove": function( event, ui ) {. . .} });
Bind an event listener to the
ojremove
event:$( ".selector" ).on( "ojremove", function( event, ui ) {. . .} );
-
#rename
-
Triggered when a tree node has been renamed.
- Source:
- ojtree/ojtree.js, line 1550
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node that has been renamed title
string the new node text title. prevTitle
string the node title prior to the rename. Examples
Initialize the Tree with the
rename
callback specified:$( ".selector" ).ojTree({ "rename": function( event, ui ) {. . .} });
Bind an event listener to the
ojrename
event:$( ".selector" ).on( "ojrename", function( event, ui ) {. . .} );
-
#select
-
Triggered when a tree node is selected.
- Source:
- ojtree/ojtree.js, line 1571
Properties:
Name Type Description event
Event jQuery
event objectui
Object Parameters Properties
Name Type Description item
Object the node that has been selected. Examples
Initialize the Tree with the
select
callback specified:$( ".selector" ).ojTree({ "select": function( event, ui ) {. . .} });
Bind an event listener to the
ojselect
event:$( ".selector" ).on( "ojselect", function( event, ui ) {. . .} );
Methods
-
#collapse(node, skipAnim)
-
Collapses an expanded node, so that its children are not visible. Triggers a "collapse" event.
Parameters:
Name Type Argument Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element to be collapsed. skipAnim
boolean <optional>
Set to true to suppress node collapse animation (assuming option property "animDuration" is defined or defaulted). Default is false. - Source:
- ojtree/ojtree.js, line 1591
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#collapseAll(node, anim)
-
Collapses a node and all its descendants. Triggers a "collapseall" event.
Parameters:
Name Type Argument Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element whose descendants are to be collapsed. If omitted , or set to -1, all nodes in the tree are collapsed. anim
boolean <optional>
Set to true (or omit) if all nodes are to collapsed with animation (assuming option property "animDuration" is defined or defaulted). Default is true. - Source:
- ojtree/ojtree.js, line 1637
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#create(refnode, position, data)
-
Creates a new node and adds it to the tree. Triggers a createnode" event.
Parameters:
Name Type Description refnode
HTMLElement | Object | string specifies the node that the new node will be placed in, or next to, depending on the "position" argument. Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element. position
string | number specifies the position of the newly created node in relation to the "refnode" specified by the first argument. Can be a string : "before", "after", "inside", "first",, "last", or a zero-based index to position the new node at a specific point among the childfren of "refnode". data
Object An object literal containing data to create the new node. The object properties are:
"attr" - an object of attribute name/value pairs (at least an "id" property should be defined).
"title" - a string used for the visible text of the node.
var new Node = { "title" : "My Title", "attr" : { "id": "myid" } };
- Source:
- ojtree/ojtree.js, line 2000
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#dehover()
-
Removes the "hover" state of the currently hovered node. Triggers a "dehover" event.
- Source:
- ojtree/ojtree.js, line 2151
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#deselect(node)
-
Deselects a node. Triggers a "deselect" event.
Parameters:
Name Type Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element to be deselected. - Source:
- ojtree/ojtree.js, line 1793
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#deselectAll(context)
-
Deselects all selected nodes. If optional argument "context" is specified, only the selected nodes within that context will be selected. Triggers a "deselectall" event.
Parameters:
Name Type Argument Description context
HTMLElement | Object | string <optional>
Can be a DOM element, a jQuery wrapped node, or a selector pointing to an element within the tree. - Source:
- ojtree/ojtree.js, line 1829
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#destroy()
-
Remove all traces of ojTree in the DOM (only the ones set using oj-tree*) and cleans out all events. If the tree was constructed from original user found in the div, reinstate the markup.
- Source:
- ojtree/ojtree.js, line 2376
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#expand(node, skipAnim)
-
Expands a collapsed parent node, so that its children are visible. Triggers an "expand" event.
Parameters:
Name Type Argument Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element to be expanded. skipAnim
boolean <optional>
Set to true to suppress node expansion animation (assuming option property "animDuration" is defined or defaulted). Default is false. - Source:
- ojtree/ojtree.js, line 1691
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#expandAll(node, anim)
-
Expands a node and all its descendants. Triggers an "expandall" event.
Parameters:
Name Type Argument Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element whose descendants are to be expanded. If omitted , or set to -1, all nodes in the tree are expanded. anim
boolean <optional>
Set to true (or omit) if all nodes are to expanded with animation (assuming option property "animDuration" is greater than zero). Default is true. - Source:
- ojtree/ojtree.js, line 1753
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#expanded(nodes, skipAnim) → {Object|null}
-
May be used as a getter of setter. If no argument is supplied, the method returns an array of nodes currently expanded. (An empty array implies that no nodes are expanded.) If an array of nodes is supplied as an argument, the specified nodes are expanded.
Parameters:
Name Type Argument Description nodes
Array <optional>
Omit to use as a getter, or specify an array of nodes to be expanded. Nodes may be defined as elements, id strings, jQuery wrapped nodes, or selectors pointing to the elements to be expanded. skipAnim
boolean <optional>
Set to true to suppress node expansion animation (assuming option property "animDuration" is defined or defaulted). Default is false. - Source:
- ojtree/ojtree.js, line 1711
Returns:
A jQuery wrapped array of nodes if used as a getter, else null if used as a setter.- Type
- Object | null
-
#getNodeBySubId(locator) → {Element|null}
-
Return the subcomponent node element represented by the locator object properties. This is under development!!
Parameters:
Name Type Description locator
Object An Object containing at minimum a "subId" property whose value is a string. Property Value Description subId "disclosure" Returns the <ins> element for the disclosure (expand/collapse) icon of a parent node. node String | Object Can be a selector for the parent node (e.g. "#mynode"), a DOM element (a node <li> or any element contained within the node <li>), a jQuery wrapped node (possibly from an event). For any other string, an attempt is made to find the node with the specified text value). Property Value Description subId "icon" Returns the <ins> element for the node icon. node String | Object Can be a selector for the node (e.g. "#mynode"), a DOM element (a node <li> or any element contained within the node <li>), a jQuery wrapped node (possibly from an event). For any other string, an attempt is made to find the node with the specified text value). Property Value Description subId "node" Returns the <li> element for the node. node String | Object Can be a selector for the node (e.g. "#mynode"), a DOM element (a node <li> or any element contained within the node <li>), a jQuery wrapped node (possibly from an event). For any other string, an attempt is made to find the node with the specified text value). Property Value Description subId "link" Returns the <a> element for the node. node String | Object Can be a selector for the node (e.g. "#mynode"), a DOM element (a node <li> or any element contained within the <li>), a jQuery wrapped node (possibly from an event). For any other string, an attempt is made to find the node with the specified text value). Property Value Description subId "disclosure" |"icon" | "node" | "link" Returns the element as described above, based on an attribute of a node <li> element. key String The name of an attribute on the node. value String The value of the attribute specified by "key". Property Value Description subId "parent" |"prevSib" | "nextSib" | "first" |"last" Returns a node <li> element based on the "subId" value and the "node" value. - "parent" - returns the parent of the node specified by "node", or null if there is no parent
- "prevSib" - returns the previous sibling of the node specified by "node", or null if there is no previous sibling
- "nextSib" - returns the next sibling of the node specified by "node", or null if there is no next sibling
- "first" - returns the first child of the parent node specified by "node". If "node" is -1 or omitted, the top node of the tree is returned.
- "last" - returns the last child of the parent node specified by "node". If "node" is -1 or omitted, the bottom node of the tree is returned
node String | Object Can be a selector for the node (e.g. "#mynode"), a DOM element (a node <li> or any element contained within the <li>), a jQuery wrapped node (possibly from an event). For any other string, an attempt is made to find the node with the specified text value). - Source:
- ojtree/ojtree.js, line 2357
Returns:
the subcomponent located by the subId string passed in locator, if found.- Type
- Element | null
-
#getPath(node, idMode) → {Array|boolean}
-
Returns the full path to a node, either as an array of ID's or node names, depending on the value of the "idmode" argument.
Parameters:
Name Type Argument Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element. idMode
boolean <optional>
Set to true (or omit) to return ID's from the node attribute "id"), or false to return the names (i.e. text titles). Default is true. - Source:
- ojtree/ojtree.js, line 2186
Returns:
An array of node ID's or names.- Type
- Array | boolean
-
#getRoot() → {Object}
-
Returns the jQuery wrapped top outer <ul> element of the tree.
- Source:
- ojtree/ojtree.js, line 2214
Returns:
The jQuery wrapped <ul> element of the tree.- Type
- Object
-
#getSubIdByNode(node) → {string|null}
-
Return the subId string for the given child DOM node
Parameters:
Name Type Description node
Element child DOM node - Inherited From:
- Source:
- ojcomponentcore/jqueryui-base.js, line 548
Returns:
- the subId for the DOM node or null when none is found- Type
- string | null
-
#getText(node) → {string|boolean}
-
Returns the title of the specified node
Parameters:
Name Type Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element. - Source:
- ojtree/ojtree.js, line 2065
Returns:
The text string title of the node.- Type
- string | boolean
-
#getType() → {string}
-
Returns the user classified node type applied to the node in the "types" option.
- Source:
- ojtree/ojtree.js, line 2271
Returns:
The node's type.- Type
- string
-
#hover(node)
-
Sets the specifed node as the current node of interest (e.g. a mouse-over). Triggers a "hover" event.
Parameters:
Name Type Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element. - Source:
- ojtree/ojtree.js, line 2116
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#isCollapsed(node) → {boolean}
-
Returns true if the node is collapsed, else false.
Parameters:
Name Type Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element. - Source:
- ojtree/ojtree.js, line 1925
Returns:
true if the node is collapsed, else false.- Type
- boolean
-
#isExpanded(node) → {boolean}
-
Returns true if the node is expanded, else false.
Parameters:
Name Type Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element. - Source:
- ojtree/ojtree.js, line 1941
Returns:
true if the node is expanded, else false.- Type
- boolean
-
#isLeaf(node) → {boolean}
-
Returns true if the node is a leaf node (that is, it has no children), else false.
Parameters:
Name Type Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element. - Source:
- ojtree/ojtree.js, line 1957
Returns:
true if the node is a leaf node, else false.- Type
- boolean
-
#isSelected(node) → {boolean}
-
Returns true if the node is selected, else false.
Parameters:
Name Type Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element. - Source:
- ojtree/ojtree.js, line 1972
Returns:
true if the node is selected, else false.- Type
- boolean
-
#move(node, refnode, position, iscopy)
-
Moves a tree node.
Parameters:
Name Type Argument Description node
HTMLElement | Object | string | number The node to be moved. Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element. refnode
HTMLElement | Object | string | number The reference node for the move. Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element. If -1 is specified, the container element is used. position
string | number The position of the moved node relative to the reference node refnode. Can be "before", "after", "inside", "first", "last", or the zero-based index to position the node at a specific point among the reference node's current children. iscopy
boolean <optional>
Specify false for a move operation, or true for a copy. - Source:
- ojtree/ojtree.js, line 2257
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#option(optionName, value) → {Object|undefined}
-
This method has several overloads, which gets and set component options.
The first overload accepts a single
optionName
param as a string, and returns the current value of that option.The second overload accepts two params, an
optionName
string and a new value to which that option will be set.The third overload accepts no params, and returns a map of key/value pairs representing all the component options and their values.
The fourth overload accepts a single map of option-value pairs to set on the component.
Parameters:
Name Type Argument Description optionName
string | Object <optional>
the option name (string, first two overloads), or the map (Object, last overload). Omitted in the third overload. value
Object <optional>
a value to set for the option. Second overload only. - Inherited From:
- Source:
- ojcomponentcore/jqueryui-base.js, line 600
Returns:
The getter overloads return the retrieved value(s). When called via the public jQuery syntax, the setter overloads return the object on which they were called, to facilitate method chaining.- Type
- Object | undefined
Examples
First overload: get one option:
var isDisabled = $( ".selector" ).ojFoo( "option", "disabled" ); // Foo is Button, Menu, etc.
Second overload: set one option:
$( ".selector" ).ojFoo( "option", "disabled", true ); // Foo is Button, Menu, etc.
Third overload: get all options:
var options = $( ".selector" ).ojFoo( "option" ); // Foo is Button, Menu, etc.
Fourth overload: set one or more options:
$( ".selector" ).ojFoo( "option", { disabled: true } ); // Foo is Button, Menu, etc.
-
#refresh(node)
-
Refreshes the tree or a node.
Parameters:
Name Type Argument Description node
HTMLElement | Object | string | number <optional>
If -1 is specified (or the argument is omitted), the whole tree is refreshed. Alternatively, a specific node to be refreshed can be supplied. Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element. - Source:
- ojtree/ojtree.js, line 2229
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#remove(node) → {Object|boolean}
-
Removes a node. Triggers a "remove" event.
Parameters:
Name Type Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element. - Source:
- ojtree/ojtree.js, line 2015
Returns:
The jQuery wrapped node used as an argument.- Type
- Object | boolean
-
#rename(node, text)
-
Renames a node title.
Parameters:
Name Type Argument Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element. text
string <optional>
The new text string. - Source:
- ojtree/ojtree.js, line 2102
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#select(node)
-
Selects a node. Triggers a "select" event.
Parameters:
Name Type Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element to be deselected. - Source:
- ojtree/ojtree.js, line 1846
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#selected(nodes) → {Array|null}
-
May be used as a getter of setter. If no argument is supplied, the method returns a jqQery wrapped list of nodes currently selected. If an array or list (that is the argument has a "length" property) of nodes is supplied as an argument, the specified nodes are selected.
Parameters:
Name Type Argument Description nodes
Array | Object <optional>
Omit to use as a getter, or specify an array or list of nodes to be expanded. Nodes may be defined as elements, jQuery wrapped nodes, or selectors pointing to the elements to be expanded. - Source:
- ojtree/ojtree.js, line 1865
Returns:
An array of nodes if used as a getter.- Type
- Array | null
-
#setType() → {boolean}
-
Sets the "type" attribute of the node.
- Source:
- ojtree/ojtree.js, line 2284
Returns:
true if the change was successful, else false.- Type
- boolean
-
#toggleExpand(node)
-
Expands a node if collapsed, or collapses a node if expanded. Triggers an "expand" or "collapse" event.
Parameters:
Name Type Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element to be expanded/collapsed. - Source:
- ojtree/ojtree.js, line 1766
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
#toggleSelect(node)
-
Selects a node if deselected, or deselects a node if selected. Triggers a "select" or "deselect" event.
Parameters:
Name Type Description node
HTMLElement | Object | string Can be a DOM element, a jQuery wrapped node, or a selector pointing to the element to be expanded/collapsed. - Source:
- ojtree/ojtree.js, line 1896
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.
Non-public Methods
Note: Extending JET components is not currently supported. Thus, non-public methods are for internal use only.
-
<protected> #_AfterCreate()
-
This method is called after
_ComponentCreate
. The JET base component does tasks here that must happen after the component (subclass) has created itself in its override of_ComponentCreate
. Notably, the base component handles therootAttributes
andcontextMenu
options here, since those options operate on the component root node, which for some components is created in their override of_ComponentCreate
.Subclasses should override this method only if they have tasks that must happen after a superclass's implementation of this method, e.g. tasks that must happen after the context menu is set on the component.
Overrides of this method should call
this._super
first.- Inherited From:
- Source:
- ojcomponentcore/jqueryui-base.js, line 292
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
<protected> #_ComponentCreate()
-
All component create-time initialization lives in this method, except the logic that specifically needs to live in
_InitOptions
or_AfterCreate
, per the documentation for those methods. All DOM creation must happen here, since the intent of_AfterCreate
is to contain superclass logic that must run after that DOM is created.Overrides of this method should call
this._super
first.- Inherited From:
- Source:
- ojcomponentcore/jqueryui-base.js, line 266
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
<protected> #_GetReadingDirection() → {string}
-
Determines whether the component is LTR or RTL.
Component responsibilities:
- All components must determine directionality exclusively by calling this protected superclass method. (So that any future updates to the logic can be made in this one place.)
- Components that need to know the directionality must call this method from
_create()
andrefresh()
, and cache the value. - Components should not call this at other times, and should instead use the cached value. (This avoids constant DOM queries, and avoids any future issues if directional islands and component reparenting (e.g. popups) should coexist.)
App responsibilities:
- The app specifies directionality by setting the HTML
"dir"
attribute on the<html>
node. When omitted, the default is"ltr"
. (Per-component directionality / directional islands are not currently supported due to inadequate CSS support.) - As with any DOM change, the app must
refresh()
the component if the directionality changes dynamically. (This provides a hook for component housekeeping, and allows caching.)
- Default Value:
"ltr"
- Inherited From:
- Source:
- ojcomponentcore/jqueryui-base.js, line 888
Returns:
the reading direction, either"ltr"
or"rtl"
- Type
- string
-
<protected> #_GetSavedAttributes(element) → {Object}
-
Gets the saved attributes for the provided element. This is usually the original list of attributes set on the element.
Parameters:
Name Type Description element
Object jQuery selection, should be a single entry - Inherited From:
- Source:
- ojcomponentcore/jqueryui-base.js, line 359
Returns:
savedAttributes - attributes that were saved for this element.- Type
- Object
-
<protected> #_InitOptions()
-
This method is called before
_ComponentCreate
, at which point the component has not yet been rendered. Component options should be initialized in this method, so that their final values are in place when_ComponentCreate
is called.This includes getting option values from the DOM, where applicable, and coercing option values (however derived) to their appropriate data type. No other work should be done in this method. See below for details.
Overrides of this method should call
this._super
first.Usage:
- If the component has an option like
disabled
that can be set from the DOM at create time, then the "get from DOM" logic should live in this method. E.g. a typical override might say "if thedisabled
option still has its initial value ofundefined
(i.e., the option has not been set), then get the DOM property and set it on the option." (See also next bullet.) - For attributes that live on the component's root node, keep in mind that anything specified via
the
rootAttributes
option will not be placed on the DOM until_AfterCreate
. So when getting attributes from the root node, components must first look in therootAttributes
option, and then, only if the attribute is not found there, look on the component root (if it already exists). - For options that, unlike
disabled
, have no corresponding DOM property, and are not otherwise set from the DOM, there is nothing to do in this method. - Do NOT set anything on the DOM in this method (like the resolved
disabled
value, or anyrootAttributes
values). The resolved option values should be set on the DOM later, in_ComponentCreate
, and therootAttributes
values are set inbaseComponent._AfterCreate
.
- Inherited From:
- Source:
- ojcomponentcore/jqueryui-base.js, line 249
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. - If the component has an option like
-
<protected> #_RestoreAttributes()
-
Restores the saved element's attributes
- Inherited From:
- Source:
- ojcomponentcore/jqueryui-base.js, line 385
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
<protected> #_SaveAttributes(element)
-
Saves the element's attributes within an internal variable to be reset during the destroy function The JSON variable will be held as : [ { "element" : element[i], "attributes" : { attributes[m]["name"] : {"attr": attributes[m]["value"], "prop": $(element[i]).prop(attributes[m]["name"]) } } ]
Parameters:
Name Type Description element
Object jQuery selection to save attributes for - Inherited From:
- Source:
- ojcomponentcore/jqueryui-base.js, line 320
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining. -
<protected> #_SetRootAttributes()
-
Reads the
rootAttributes
option, and sets the root attributes on the component's root DOM element.class
andstyle
are appended to the current class and style, respectively. All other attributes overwrite any existing value.- Inherited From:
- Source:
- ojcomponentcore/jqueryui-base.js, line 103
Returns:
When called via the public jQuery syntax, this method returns the object on which it was called, to facilitate method chaining.