Creating Checkbox Tree In Oracle Apex 5.0

 Required Tools

 vOracle Apex (Version 5)

Step 1

Create Tree Region

Sample code: 

                SELECT   CASE

            WHEN CONNECT_BY_ISLEAF = 1 THEN 0

            WHEN LEVEL = 1 THEN 1

            ELSE -1

         END

            AS status,

         LEVEL,

         Ename AS title,

         NULL AS icon,

         EMPNO AS VALUE,

         NULL AS tooltip,

         NULL AS LINK

         FROM   EMP 

       START WITH "MGR" IS NULL

CONNECT BY NoCYCLE PRIOR "EMPNO" = "MGR"  

Step 2 

       Assign Static ID to Tree region as Treestatic-id .

      

Step 3

       Paste below code under Page Attributes -> Javascripts->Execute when Page Load.

   Code :

regTree = apex.jQuery("#Treestatic-id").find("div.tree");

regTree.tree({

 ui : {

  theme_name : "checkbox"

 },

 callback : {

  onchange : function(NODE, TREE_OBJ) {

   if (TREE_OBJ.settings.ui.theme_name == "checkbox") {

    var $this = $(NODE).is("li") ? $(NODE) : $(NODE).parent();

    if ($this.children("a.unchecked").size() == 0) {

     TREE_OBJ.container.find("a").addClass("unchecked");

    }

    $this.children("a").removeClass("clicked");

    if ($this.children("a").hasClass("checked")) {

     $this.find("li").andSelf().children("a").removeClass("checked").removeClass("undetermined").addClass("unchecked");

     var state = 0;

    } else {

     $this.find("li").andSelf().children("a").removeClass("unchecked").removeClass("undetermined").addClass("checked");

     var state = 1;

    }

                $this.parents("li").each(function() {

     if (state == 1) {

      if ($(this).find("a.unchecked, a.undetermined").size() - 1 > 0) {

       $(this).parents("li").andSelf().children("a").removeClass("unchecked").removeClass("checked").addClass("undetermined");

       return false;

      } else

       $(this).children("a").removeClass("unchecked").removeClass("undetermined").addClass("checked");

     } else {

      if ($(this).find("a.checked, a.undetermined").size() - 1 > 0) {

       $(this).parents("li").andSelf().children("a").removeClass("unchecked").removeClass("checked").addClass("undetermined");

       return false;

      } else

       $(this).children("a").removeClass("checked").removeClass("undetermined").addClass("unchecked");

     }

    });

   }

  }

       ,onopen : function(NODE, TREE_OBJ) {

           $(NODE).removeClass("open").addClass("closed");

        }

       ,onclose : function(NODE, TREE_OBJ) {

           $(NODE).removeClass("closed").addClass("open");

        }

 }

}); 

         Tree region with checkbox:

                                                

          Inspect checkbox “JONES”

  

  

   Here column "EMPNO" from "Emp" table is the above "li id" ID value.

Step 4

      Create Hidden Item to capture checked Value.

       Item:  P16_EMP_HID

Step 5

       Create a button as SAVE (Define by dynamic action).

Step 6 

        Create a dynamic action

Event          : Click

Selection_type  : Button

Button         : SAVE

Create a true action using below code under Execute JavaScripts Code.

var lPassengers = [];

$("#Treestatic-id a.checked").parent()

  .each(function() { lPassengers.push($(this).attr("id")) });

$s("P16_EMP_HID",lPassengers.join(":"));

Step 7

Click Save button to find checked Value.

To Auto Check the tree using hidden item value

  

    1) Create dynamic action

           Event : On page Load.

        

Create a true action using below code under Execute JavaScripts Code.

        $(document).ready(function(){

$.each(  $v("P16_EMP_HID").split(":"),

        function(intIndex, objValue) {

        $("li#"+objValue+".leaf a:first-child").click();

         } );

         });