I need second pair of eyes for this problem. I have been having problem with the layout of my tree. The children of the tree should be indented under their parents/folder, very much like windows explorer.
If my codes works, it should look like this
Gallery
Gallery1
Gallery2
Gallery3
I really appreciate any help from any of experts in here.
Here is the data in db
ItemID ItemName ItemType ParentID
30 Gallery F 0
31 Gallery1 F 30
32 Gallery2 F 31
33 Gallery3 F 30
Here is the code.
<html>
<head>
<title>Tree Menu</title>
<link rel='stylesheet' href='tree.css'>
<script language="javascript" src="tree.js"></script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<cfif IsDefined ("attributes.ParentID")>
<cfset ParentID = #attributes.ParentID#>
<cfset FolderIDList = #attributes.FolderIDList#>
<cfset ItemList = #attributes.ItemList#>
<cfset Pad = #attributes.Pad#>
<cfelse>
<cfset ParentID = 0>
<!--- Get a list of folders from db --->
<cfquery Name="GetFolderList" datasource="TreeDS">
SELECT ItemID
FROM TreeTable
WHERE ItemType = 'F'
</cfquery>
<cfoutput>
<cfset FolderIDList = "">
<cfset ItemList = "">
<cfloop query="GetFolderList">
<cfset FolderIDList = ListAppend(FolderIDList, #Trim(GetFolderList.ItemID)#)>
<!--- Get a list of items for each folder #trim(GetFolderList.ItemID)#--->
<cfquery Name="GetItemList" datasource="TreeDS">
SELECT count(ItemName) AS ItemCount
FROM TreeTable
WHERE ParentID = #Trim(GetFolderList.ItemID)#
</cfquery>
<cfset ItemList = ListAppend(ItemList, #Trim(GetItemList.ItemCount)#)>
</cfloop>
</cfoutput>
</cfif>
<cfquery name="GetChildren" datasource="TreeDS">
SELECT ItemID, ItemName, ItemType, ParentID
FROM TreeTable
WHERE ParentID = #ParentID#
ORDER BY ItemName
</cfquery>
<cfoutput>
<cfset Pad = 0>
<cfloop query="GetChildren">
<cfset i = #ListFind(FolderIDList, Trim(GetChildren.ItemID))# >
<cfset ChildrenNum = #ListGetAt(ItemList, i)# >
#i# #ChildrenNum# <br>
<cfset Folder = #Trim(GetChildren.ItemName)#>
<cfset FolderID = "x" & #Folder#>
<cfif #Trim(GetChildren.ItemType)# EQ "F">
<!--- Display folders --->
Pad = #Pad# <br>
<a id=#FolderID# href="javascript:Toggle('#Folder#');"><img src='folder.gif' width='16' height='16' hspace='0' vspace='0' border='0'></a>
<b>#Folder#</b> <br>
<div id="#Folder#" style=" display: none; padding-left:#Pad#">
<!--- <div id="#Folder#" style="display: none; margin-left: 2em;"> --->
<cfif ChildrenNum EQ 0>
<cfset ItemList = #ListSetAt(ItemList, i, ChildrenNum)# >
<cfset Pad = Pad + 15>
</div>
<cfelse>
<cfset ChildrenNum = ChildrenNum - 1>
<cfset ItemList = #ListSetAt(ItemList, i, ChildrenNum)# >
</cfif>
<cfelse>
<!--- Display content of a folder --->
<img src='text.gif' width='16' height='16' hspace='0' vspace='0' border='0'>
<a href="DirContent.cfm?ParentID=#GetChildren.ItemID#&FolderName=#GetChildren.ItemName#" target="master">#GetChildren.ItemName#</a> <br>
<cfif ChildrenNum EQ 0>
<cfset ItemList = #ListSetAt(ItemList, i, ChildrenNum)# >
<cfset Pad = Pad + 15>
</div>
<cfelse>
<cfset ChildrenNum = ChildrenNum - 1>
<cfset ItemList = #ListSetAt(ItemList, i, ChildrenNum)# >
</cfif>
</cfif>
<cfquery Name="GrandChildren" datasource="TreeDS">
SELECT ItemID, ItemName, ItemType, ParentID
FROM TreeTable
WHERE ParentID = #GetChildren.ItemID#
</cfquery>
<cfif GrandChildren.RecordCount GT 0>
<cf_tree ParentID = "#GetChildren.ItemID#"
FolderIDList = #FolderIDList#
ItemList = #ItemList#
Pad = #Pad#>
</cfif>
</cfloop>
</cfoutput>
</body>
</html>
If my codes works, it should look like this
Gallery
Gallery1
Gallery2
Gallery3
I really appreciate any help from any of experts in here.
Here is the data in db
ItemID ItemName ItemType ParentID
30 Gallery F 0
31 Gallery1 F 30
32 Gallery2 F 31
33 Gallery3 F 30
Here is the code.
<html>
<head>
<title>Tree Menu</title>
<link rel='stylesheet' href='tree.css'>
<script language="javascript" src="tree.js"></script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<cfif IsDefined ("attributes.ParentID")>
<cfset ParentID = #attributes.ParentID#>
<cfset FolderIDList = #attributes.FolderIDList#>
<cfset ItemList = #attributes.ItemList#>
<cfset Pad = #attributes.Pad#>
<cfelse>
<cfset ParentID = 0>
<!--- Get a list of folders from db --->
<cfquery Name="GetFolderList" datasource="TreeDS">
SELECT ItemID
FROM TreeTable
WHERE ItemType = 'F'
</cfquery>
<cfoutput>
<cfset FolderIDList = "">
<cfset ItemList = "">
<cfloop query="GetFolderList">
<cfset FolderIDList = ListAppend(FolderIDList, #Trim(GetFolderList.ItemID)#)>
<!--- Get a list of items for each folder #trim(GetFolderList.ItemID)#--->
<cfquery Name="GetItemList" datasource="TreeDS">
SELECT count(ItemName) AS ItemCount
FROM TreeTable
WHERE ParentID = #Trim(GetFolderList.ItemID)#
</cfquery>
<cfset ItemList = ListAppend(ItemList, #Trim(GetItemList.ItemCount)#)>
</cfloop>
</cfoutput>
</cfif>
<cfquery name="GetChildren" datasource="TreeDS">
SELECT ItemID, ItemName, ItemType, ParentID
FROM TreeTable
WHERE ParentID = #ParentID#
ORDER BY ItemName
</cfquery>
<cfoutput>
<cfset Pad = 0>
<cfloop query="GetChildren">
<cfset i = #ListFind(FolderIDList, Trim(GetChildren.ItemID))# >
<cfset ChildrenNum = #ListGetAt(ItemList, i)# >
#i# #ChildrenNum# <br>
<cfset Folder = #Trim(GetChildren.ItemName)#>
<cfset FolderID = "x" & #Folder#>
<cfif #Trim(GetChildren.ItemType)# EQ "F">
<!--- Display folders --->
Pad = #Pad# <br>
<a id=#FolderID# href="javascript:Toggle('#Folder#');"><img src='folder.gif' width='16' height='16' hspace='0' vspace='0' border='0'></a>
<b>#Folder#</b> <br>
<div id="#Folder#" style=" display: none; padding-left:#Pad#">
<!--- <div id="#Folder#" style="display: none; margin-left: 2em;"> --->
<cfif ChildrenNum EQ 0>
<cfset ItemList = #ListSetAt(ItemList, i, ChildrenNum)# >
<cfset Pad = Pad + 15>
</div>
<cfelse>
<cfset ChildrenNum = ChildrenNum - 1>
<cfset ItemList = #ListSetAt(ItemList, i, ChildrenNum)# >
</cfif>
<cfelse>
<!--- Display content of a folder --->
<img src='text.gif' width='16' height='16' hspace='0' vspace='0' border='0'>
<a href="DirContent.cfm?ParentID=#GetChildren.ItemID#&FolderName=#GetChildren.ItemName#" target="master">#GetChildren.ItemName#</a> <br>
<cfif ChildrenNum EQ 0>
<cfset ItemList = #ListSetAt(ItemList, i, ChildrenNum)# >
<cfset Pad = Pad + 15>
</div>
<cfelse>
<cfset ChildrenNum = ChildrenNum - 1>
<cfset ItemList = #ListSetAt(ItemList, i, ChildrenNum)# >
</cfif>
</cfif>
<cfquery Name="GrandChildren" datasource="TreeDS">
SELECT ItemID, ItemName, ItemType, ParentID
FROM TreeTable
WHERE ParentID = #GetChildren.ItemID#
</cfquery>
<cfif GrandChildren.RecordCount GT 0>
<cf_tree ParentID = "#GetChildren.ItemID#"
FolderIDList = #FolderIDList#
ItemList = #ItemList#
Pad = #Pad#>
</cfif>
</cfloop>
</cfoutput>
</body>
</html>
