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();
} );
});
Excellent blog, thanks for Sharing this informative article.
ReplyDeleteOracle Fusion SCM Online Training
Oracle Fusion Financials Online Training