CFTREE : Cftree Windows üzerinde sık sık kullandığımız bir yapı ve onunla yolumuza devam edelim. Yanımıza submitForm ajax fonkisyonumuzuda alarak bir örnek uygulama daha yapalım. Cftree nesnesini doldurup seçili olan bölümü başka bir sayfaya gönderip seçili olan nesnenin bilgilerini alıp yine kendi sayfamızda yazdıralım.

cftree.cfm adında bir sayfa oluşturalım.

<cfajaximport>

<script>

 function formuGonder() {

        ColdFusion.Ajax.submitForm('girisForm', 'windowsource.cfm', sonuc,

            hata);

//submitForm fonksiyonumuzu çalıştıyoruz girisForm gönderilecek olan formu, windowsource.cfm gidilecek olan sayfayı sonuc dönen sonucun gönderileceği fonksiyon hata ise gönderdiğimiz sayfada bi hata oluşması durumda mesajın gösterileceği fonksiyon. Aksi belirtilmediği halde Asenkron ' true ' ve gönderim metodu ' post ' olarak seçilecektir.

    }

    function sonuc(text) // windowsource.cfm'in yazılacağı fonksiyon

    {

                        document.getElementById("icerik").innerHTML = text;

    }

    function hata(code, msg) // hata fonksiyonu

    {

        alert("Hata!!! " + code + ": " + msg);

    }

</script>

<!--- kisilerin bilgilerini alıp bunları STATE e göre gurpluyoruz çünkü bu gruplama tree ye aktarırken bize yardımcı olucak --->

<cfquery name = "kisiler" dataSource = "cfArtGallery">

    SELECT ARTISTID, FirstName, LastName, EMail, Phone, STATE

    FROM ARTISTS

    GROUP BY STATE, ARTISTID, FirstName, LastName, EMail, Phone

</cfquery>

<cfform name="girisForm" action="navigate.cfm" preservedata="Yes">

    <cftree format="applet" name = "Employees" height = "400" width = "400"

        font = "Arial Narrow" italic="yes" highlighthref="yes" HScroll="no" VScroll="yes"

        completepath="no" lookandfeel="metal" border="No" required="yes">

        <!--- cfoutput bizim için stateleri gruplayıp tekrar ederek yazdırıcak kişiler sorgusundaki --->

        <cfoutput group="STATE" query = "kisiler">

            <cftreeitem value="#STATE#" parent="Employees" expand="yes">

            <!--- bir diğer output daha açıyoruz parentları listelemek için --->

            <cfoutput>

                <!--- tüm treeleri sırasıyla istediğimiz şekilde birbirleri ile ilişkilendiriyoruz--->

                <cftreeitem value = "#LastName#, #FirstName#"

                    parent = "#STATE#" expand="false" img="cd">

                <!--- her treenin farklı bi idsi olması gerekteğini hatırlatıyım yoksa nodelar birbirine karışacaktır. --->

                <cftreeitem value = "#ARTISTID#" display = "ARTIST ID: #ARTISTID#"

                    parent = "#LastName#, #FirstName#" img="remote">

                <cftreeitem value = "#ARTISTID#_ContactInfo" img="computer"

                    display = "Contact Information"

                    parent = "#LastName#, #FirstName#" expand = "false">

                <cftreeitem value = "#Phone#" parent = "#ARTISTID#_ContactInfo">

                <cftreeitem value = "#Email#" parent = "#ARTISTID#_ContactInfo">

            </cfoutput>

        </cfoutput>

    </cftree>

    <!--- Tree formumuzu AJAX submitForm ile windowsource sayfasına gönderiyoruz ve gelen sonucu icerik adlı divimize yazdırıcaz. --->

    <cfinput type="button" onClick="javascript:formuGonder();" name="submitit" value="Gonder" width="100">

    <div id="icerik"></div>

</cfform>

Bilgileri alıp cftree.cfm sayfamıza yazdırmamıza yardımcı olucak ikinci sayfamız windowsource.cfm oluşturalım.

<cfif isdefined("Form.fieldnames")>

<cfoutput>

<!---form nesnesi var ise aşağıda seçili olan bilgileri yazdırıyoruz bu sayfa yazılı olan herşey bu sayfaya veri gönderen fonksiyona geri döndürülücek.--->

<b>Yol: </b>#form.Employees.Path#<br>

<b>Alt: </b>#form.Employees.node#<br>

<br>

</cfoutput>

</cfif>