Working with the tree

Information

Selecting, opening and closing a node will provide an entry in the feedback log.
Selecting a node will change the value of the "Selected EMP" field. This is the value of the node, and in this case the EMPNO of the selected employee.
Selecting a node will also refresh the report with employee details. It is just a small example of how to expand the functionalities of the tree, and it shows that you don't really need a page submit to make this work. Please note that i am NOT using a "link" to do this. If a link were to be defined to set the value of P38_SELECTED_EMP a page redirect would happen.
To search the tree, provide a search term and click the "Search tree" button. (example: BEN, URU, KING,...) The matching entries will be added to the feedback log, and the matching nodes will get a green border. Note that searching will by default be case sensitive and is a "contains" action, but this behaviour can be altered by providing your own matcher function.
You can open the tree up to a selected level by using the "Reset and Open to Level" button. OTN threadd: How to set tree max level in V4+ trees?
In the "Employees - select a node" you can click on one of the links to directly select the node in tree which corresponds with that employee. The screen will also scroll up to bring the node in view. For example, expand the tree, scroll down and click the last record. OTN thread: Tree issues

Some more info can be found on my blogpost about working with the apex tree.

Tree

EMP Details

No employee selected in the tree.

Tree actions

Feedback Log
(Top=last addition)

Selected Emp

Search Tree For

Case insensitive?

Open up to level

Employees - select a node

SELECT_NODE	EMPNO	ENAME
Select Node	1212	TEST1
Select Node	1234	test
Select Node	7369	11
Select Node	7499	STATHAM
Select Node	7521	M BENZ 2nd
Select Node	7566	SMITH
Select Node	7698	PICARD
Select Node	7782	TestUser1
Select Node	7788	URUGUAY
Select Node	7839	KING
Select Node	7876	ADAMS
Select Node	7900	JAMES
Select Node	7902	FRANCINE
Select Node	7934	MILLER
Select Node	7980	testoracle
Select Node	7981	testoracle
Select Node	7982	ts
Select Node	7983	er
Select Node	7984	sdsfs
Select Node	9663	TOM6
Select Node	9683	TOM
Select Node	9684	TOM4
Select Node	9685	TOM7
Select Node	9686	TOM98
Select Node	9687	TOM97
Select Node	9700	TOM2
Select Node	9701	TOM3
Select Node	9702	TOM5
Select Node	9703	TOM8
Select Node	9704	TOM99
Select Node	9720	TOM96
Select Node	9740	TOM89
Select Node	9750	TOM60
Select Node	9760	TOM88
Select Node	9769	TOM87
Select Node	9997	dsfsf
Select Node	9998	fdfdg
Select Node	9999	dgf

1 - 38

Code and settings

Javascript > Function and global variable declaration:

var l$Tree;

function addFeedback(pMsg){
  if($.browser.ie){
    $("#P38_FEEDBACK").val(pMsg + "\n\r" + $("#P38_FEEDBACK").val());
  }else{
    $("#P38_FEEDBACK").val(pMsg + "\n" + $("#P38_FEEDBACK").val());
  }
};
function searchTree(pWhat,pHow){
  $.tree.reference(l$Tree).search(pWhat,pHow);
  addFeedback("Searching the tree for " + pWhat + " yields nodes:");
  $(".search").each(function(){
    addFeedback("Matched node: " + $(this).parent().attr('id') + $(this).text());
  });
};

function treeOnload(){
l$Tree = $("#emptree div.tree");
$.extend($.expr[':'], {
    ciContains: function(elem, i, match) {
        return $(elem).text().toUpperCase().indexOf(match[3].toUpperCase()) >= 0;
    }
});

$.tree.reference(l$Tree).settings.data.async = false;
$.tree.reference(l$Tree).settings.callback.onselect = function(NODE, TREE_OBJ){
  addFeedback("Selected node: " + $(NODE).attr('id') + $("a:first", NODE).text());
  $("#P38_SELECTED_EMP").val($(NODE).attr('id'));
  $("#report_emp").trigger("apexrefresh");
};
$.tree.reference(l$Tree).settings.callback.onopen= function(NODE, TREE_OBJ) { 
  addFeedback("Opened node: " + $(NODE).attr('id') + $("a:first", NODE).text());
  $("#P38_SELECTED_EMP").val($(NODE).attr('id'));
};
$.tree.reference(l$Tree).settings.callback.onclose= function(NODE, TREE_OBJ) { 
  addFeedback("Closed node: " + $(NODE).attr('id') + $("a:first", NODE).text());
  $("#P38_SELECTED_EMP").val($(NODE).attr('id'));
};
};

function resetAndOpenToLevel ( pTree, pMaxLevel ) {
   apex.jQuery.tree.reference(pTree).close_all();

   $("ul", pTree).each(function ( index ) {
      if ( $(this).parents("ul").length <= pMaxLevel ) {
         apex.jQuery.tree.reference(pTree).open_branch(this);
      };
   });
};

Onload:

treeOnload();

CSS Inline:

.search{
border-style:solid;
border-width:1px;
border-color:green;
}

REPORT: EMP Details
The report template is the "attribute - values pair".

select empno, ename, job, hiredate, sal, comm, deptno, mgr
from emp
where empno = :P38_SELECTED_EMP

Page items to submit:

P38_SELECTED_EMP

Static id:

report_emp

Dynamic action on the "Search tree" button: fires on click.
A true action of type "Execute javascript". Does not fire on page load.

searchTree($v("P38_SEARCH_TREE"), $("#P38_SEARCH_CASE_0").prop("checked") ? "ciContains" : null);

This will call the "searchTree" function defined in the "Function and global variable declaration" and provide the value of the search field as a parameter.
The thing that makes search work in this function is just this line:

$.tree.reference(l$Tree).search(pWhat, pHow);

The other lines are simply feedback, but it provides an example of how you can read the matched elements in javascript.
The pHow parameter is the pseudo-selector used for the search operator. Default it is "contains", and this is not case-sensitive. To make it case-sensitive a new pseudo-class has been added, ciContains, to be able to perform a case-insensitive contains operation. The inline-if construct will set pHow to ciContains when the checkbox has been checked. Note that an apex checkbox item will be a fieldset element, which in turn holds the actual checkbox. The _0 suffix will target the checkbox directly. Using $v on the fieldset will return the value of the checkbox as defined in the item's lov settings.
Dynamic action on the "Reset and Open to Level" button: fires on click.
A true action of type "Execute javascript". Does not fire on page load.

resetAndOpenToLevel(l$Tree, $v("P38_OPEN_LEVEL"));

P38_OPEN_LEVEL is the select list. Select a level and click the button to first reset the tree, and then have it opened up to nodes of the selected level. A level which is larger than the maximum level will simply expand the tree completely.
REPORT: Employees - select a node

select null select_node, empno, ename from emp order by empno

Column "SELECT_NODE": column link defined:

Link Text: Select Node
Link Attributes: onclick="return false;" class="treeselect" data-node-id="#EMPNO#"
Target: URL
URL: #

Dynamic action "select node from report"

Event: Click
Selection Type: jQuery Selector
jQuery Selector: .treeselect

True action: execute javascript code

var l$Node = $("#"+$(this.triggeringElement).data("node-id"));
apex.jQuery.tree.reference(l$Tree).select_branch(l$Node);

$('html, body').animate({
    scrollTop: l$Node.offset().top
}, 2000);