Index
Index 2
Why I use Linux and Firefox
HTML DB & Javascript
The Basics
Enable/Disable Form Items
HTML DB Javascript Remix
Show/Hide/Toggle Form Items
htmldb_Get Introduction
AJAX & DHTML
AJAX
Set Multiple Items
(AJAX) Auto Update Report
(AJAX) Collection Control
(AJAX) Process On Demand
(AJAX) Report Pull
(AJAX) Report Row with Detail
(AJAX) Select Items
(AJAX) Set Item Value
(AJAX) Tree
htmldb_Get Aysnc Extension
DHTML
Form Element Focus
Progress Meter On Submit
Region Tabs
Report Row With Detail (iframe)
Report Row with Detail
Shuttle (Item Based)
Shuttle (PL/SQL Based)
Smart Table
List (DHTML Tree)
Show/Hide Report Columns
HTML DB Usage
Linked Reports
HTML/CSS/Layout
HTML DB DHTML Tree
Region Position
Report Row Templates
Multi Region Form Layout
Vertical Aligned Regions
Layout Example
SVG / Canvas
Canvas #1
Custom Charts
Thermometer
Scatter (Coming Soon)
Timeline (Coming Soon)
SVG Knowledge Tree
Pie Chart CSS
Bar Spacing
Application Exports / CSS / JS
AJAX Tree
Index
>
AJAX and DHTML
>
AJAX Tree
AJAX Tree
KING
1DUDE
Code
Javascript
function html_TooglePlusMinus(pThis){ if(html_CheckImageSrc(pThis,'plus')){ pThis.src = html_replace(pThis.src,'plus','minus'); }else{ pThis.src = html_replace(pThis.src,'minus','plus'); } } function get_AJAX_TREE(pThis,pValue){ html_TooglePlusMinus(pThis); if(html_GetElement('branch'+pValue)){ /*toggles branch if already in page*/ html_ToggleElement('branch'+pValue); }else{ var get = new htmldb_Get(null,11933,'APPLICATION_PROCESS=otn_AJAX_BRANCH',0); get.add('BRANCH_ID',pValue); gReturn = get.get(); if (gReturn){html_GetElement(pThis).parentNode.innerHTML += gReturn} get = null; } }
On Demand Process
declare l_counter number; l_o_name varchar2(2000); begin htp.prn('<ul id="branch'||:BRANCH_ID||'" style="list-style:none;">'); for rec in ( SELECT "EMP"."MGR" as "MGR","EMP"."EMPNO" as "EMPNO", "EMP"."ENAME" as "ENAME" ,(select count(*) from "EMP" "EMP2" where "EMP2"."MGR" = "EMP"."EMPNO") BranchCount from "EMP" "EMP" where "EMP"."MGR" = :BRANCH_ID ) loop if(rec.BranchCount > 0) then htp.prn('<li style="vertical-align:middle;"><img style="cursor:hand;cursor:pointer;margin-right:5px;" src="https://static.oracle.com/cdn/apex/24.2.6/themes/theme_23/collapse_plus.gif" onclick="get_AJAX_TREE(this,'||rec.EMPNO||')" />'||rec.ENAME||'</li>'); else htp.prn('<li style="vertical-align:middle;padding-right:5px;">'||rec.ENAME||'</li>'); end if; end loop; htp.prn('</ul>'); end;
Plsql Region
declare l_counter number; l_o_name varchar2(2000); begin htp.prn('<ul id="treeTrunk" style="list-style:none;">'); for rec in ( SELECT "EMP"."MGR" as "MGR","EMP"."EMPNO" as "EMPNO", "EMP"."ENAME" as "ENAME" ,(select count(*) from "EMP" "EMP2" where "EMP2"."MGR" = "EMP"."EMPNO") BranchCount from "EMP" "EMP" where "EMP"."MGR" is null ) loop if(rec.BranchCount > 0) then htp.prn('<li class="pseudoButtonInactive" style="vertical-align:middle;"><img style="cursor:hand;cursor:pointer;margin-right:5px;" src="https://static.oracle.com/cdn/apex/24.2.6/themes/theme_23/collapse_plus.gif" onclick="get_AJAX_TREE(this,'||rec.EMPNO||')" />'||rec.ENAME||'</li>'); else htp.prn('<li style="vertical-align:middle;padding-right:5px;">'||rec.ENAME||'</li>'); end if; end loop; htp.prn('</ul>'); end;
Notes
Forum Link
KING