Org chart with CF and jquery
Copy link to clipboard
Copied
Hi all, I am trying to create a drilldown organizational chart with jquery and CF... but i was not able to make the visual part.. Each supervisor level will have plus.gif/minus.gif that expand/collapse based on click...like windows file system..this query(field -formated_name) gets all correct levels but when it comes to display i could not make it work. Any help appreciated...
------
<cfquery name="data" datasource="#request.dsn#">
with emp_data as
(select '/'+cast(employee_master_id as varchar(49)) as reporting_path,
employee_master_id
from dbo.employee_master em
where em.employee_master_id = #session.employee_master_id#
union all
select cast(emp_data.reporting_path+'/'+CAST(em.employee_master_id as varchar(4)) as varchar(50)),
em.employee_master_id
from dbo.employee_master em join emp_data on em.supervisor_id = emp_data.employee_master_id
)
select employee_master_id,
employee_master_uuid,
first_name,
last_name,
supervisor_id,
replicate(char(9),((DATALENGTH(reporting_path)-DATALENGTH(REPLACE(reporting_path,'/','')))*2)-2)+last_name+', '+first_name as formated_name,
IsSupervisor=(select case when count(1) > 0 then 'Y' else 'N' end from dbo.employee_master es where es.supervisor_id=result.employee_master_id)
from (select emp_data.reporting_path,
em.employee_master_id,
em.employee_master_uuid,
em.first_name,
em.last_name,
em.supervisor_id
from emp_data join dbo.employee_master em on emp_data.employee_master_id = em.employee_master_id) result
order by reporting_path;
</cfquery>
Copy link to clipboard
Copied
Here are a couple of options you might use to create a tree view to display your org chart.
CFTREEhttp://help.adobe.com/en_US/ColdFusion/9.0/CFMLRef/WSc3ff6d0ea77859461172e0811cbec22c24-7d84.htmlWijmo Tree Widget - a commercial plugin for jQuery
http://wijmo.com/widgets/wijmo-complete/tree/
Copy link to clipboard
Copied
not big help.. cftree may not work with what i have...
Copy link to clipboard
Copied
I would be glad to offer more assistance, however I am not sure what kind of help you need. Your original post contains a query which you state returns the correct data, "this query(field -formated_name) gets all correct levels". You also state you are trying to create a drill down chart, but have not posted any code related to UI. Based on your statement "i was not able to make the visual part" I infered that you'd like a pointer to a resource that will help you create your UI. Can you be more specific about the help you'd like to receive?
Copy link to clipboard
Copied
applying the cftree to my query outputs what i need...here is how. Thank you all.
<cfform
name="form">
<cftree format="html" name="drilldown" width="500">
<!--- <cftreeitem display="#data.formated_name[1]#" value="root"> --->
<cfloop query="data">
<cftreeitem display="#first_name# (#employee_title#) →<a href='Evaluation_EditA.cfm?person=#employee_master_uuid#'>Evalution</a>"
parent="#supervisor_id#"
value="#employee_master_id#"
expand="no"
img="#request.rootPath#assets/tinyman.png">
</cfloop>
</cftree>
</cfform>

