[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 542
  • Last Modified:

cftree need sub menu

Dear Expert,

how to get sub menu under each node

<cfquery name="getCourses" datasource="tree">
SELECT main.id_name, sub.id, sub.description
FROM sub INNER JOIN main ON sub.parent_id = main.id;
</cfquery>

in mdb file in "sub" table i assing parent id of sub table's id so each node under i can get sub node , also i need another sub node under this subnote , i mean dynamic and unlimited




<cfform name="studentForm" format="flash" width="1000" height="1000">
    <cftree name="courseTree" width="985" height="950" font="Arabic Transparent" fontsize="12.5">
        <cftreeitem
            query="getCourses"
            value="id_name,id"
            display="id_name,description" queryasroot="NO" expand="no">
    </cftree>
</cfform>



cfdocexamples.mdb
untitled.JPG
0
faisalmohi
Asked:
faisalmohi
  • 2
1 Solution
 
Brijesh ChauhanStaff IT EngineerCommented:
Use the PARENT attribute

say you have a sub-tree under Divisions, so you would have

<cftreeitem value="Divisions">
<cftreeitem value="Development"  
        parent="Divisions" img="folder">

so the Development would be under Divisions, specify the parent in there...

here is an example

<cfform name="form2" action="cfform_submit.cfm" format="html"> 
<cftree name="tree1" hscroll="No" vscroll="No" 
    border="No"> 
    <cftreeitem value="Divisions"> 
    <cftreeitem value="Development"  
        parent="Divisions" img="folder"> 
    <cftreeitem value="Product One"  
        parent="Development" img="document"> 
    <cftreeitem value="Product Two"  
        parent="Development"> 
    <cftreeitem value="GUI"  
        parent="Product Two" img="document"> 
    <cftreeitem value="Kernel"  
        parent="Product Two" img="document"> 
    <cftreeitem value="Product Three"  
        parent="Development" img="document"> 
    <cftreeitem value="QA"  
        parent="Divisions" img="folder"> 
    <cftreeitem value="Product One" 
        parent="QA" img="document"> 
    <cftreeitem value="Product Two"  
        parent="QA" img="document"> 
    <cftreeitem value="Product Three" 
        parent="QA" img="document"> 
    <cftreeitem value="Support" 
        parent="Divisions" img="fixed"> 
    <cftreeitem value="Product Two" 
        parent="Support" img="document"> 
    <cftreeitem value="Sales" 
        parent="Divisions" img="computer"> 
    <cftreeitem value="Marketing" 
        parent="Divisions" img="remote"> 
    <cftreeitem value="Finance" 
        parent="Divisions" img="element"> 
</cftree> 
</cfform>

Open in new window

0
 
Brijesh ChauhanStaff IT EngineerCommented:
In loop, you would have 2 do 2 loops and 2 queries, the first one will get the , and the second one will get the sub-menu's

something like this


<cfquery name="getCourses" datasource="tree">
SELECT main.id_name, main.id
FROM sub 
</cfquery
<cfform name="studentForm" format="flash" width="1000" height="1000">
    <cftree name="courseTree" width="985" height="950" font="Arabic Transparent" fontsize="12.5">
    <cfloop query="getCourses">
    	 <cftreeitem value="#getCourses.id_name#"> 
         <cfquery name="getSubMenu" datasource="tree">
         	SELECT sub.id, sub.description
            FROM sub where sub.parent_id = #id#
         </cfquery>
		<cfif getSubMenu.id NEQ ''>
        	<cfloop query="getSubMenu">
            	<cftreeitem value="#getSubMenu.description#"  
       	 			parent="#getCourses.id_name#">
            </cfloop>
        </cfif>
    </cfloop>
</cftree>
</cfform>

Open in new window

0
 
Gurpreet Singh RandhawaWeb DeveloperCommented:
@btw

if the list is too long, it will make the performace very very slow and it will take a long time to retrieve because nesting a query inside a tree which runs on each after node will definately hit perfornace, if u are not concerned with this, I must say you go ahead with this!

otherwise you can always use jquery for this and use cfoutput group attribute to group your results the thing like below will work! a juery stuff and a tree structure

<style>
.plusimageapply{list-style-image:url(plus.jpg);}
.minusimageapply{list-style-image:url(minus.jpg);}
.noimage{list-style-image:none;}
</style>
<script>
$(document).ready(function() {
$('li.drink').addClass('plusimageapply');
$('li.drink').children().addClass('noimage');
$('li.drink').children().hide();
$('li.drink').each(
function(column) {
$(this).click(function(event){
if (this == event.target) {
if($(this).is('.plusimageapply')) {
$(this).children().show();
$(this).removeClass('plusimageapply');
$(this).addClass('minusimageapply');
}
else
{
$(this).children().hide();
$(this).removeClass('minusimageapply');
$(this).addClass('plusimageapply');
}
}
});
}
);
});
</script>
<body>
<ul>
<li class="drink">Tea
<ul>
<li>Darjeeling</li>
<li class="drink">Assam
<ul>
<li>Green Leaves</li>
<li>Herbal</li>
</ul>
</li>
<li>Kerala</li>
</ul>
</li>
<li class="drink">Coffee
<ul>
<li>Cochin</li>
<li>Kerala</li>
</ul>
</li>
</ul>
</body>

Open in new window


run this code and you will get a tree like structure here
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now