Friday 21 September 2018

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();
         } );
         });

                

1 comment: