Apache velocity template with ztree

Both of velocity and ztree is new technology for me. I already read about velocity and ztree. My problem is how to show my output with ztree. Please advice me..

Here is my code...

    <html>
    <head>
        #[[
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <link rel="stylesheet" href="tree/demo.css" type="text/css">
            <link rel="stylesheet" href="tree/zTreeStyle.css" type="text/css">
            <script type="text/javascript" src="tree/js/jquery-1.4.4.min.js"></script>
            <script type="text/javascript" src="tree/js/jquery.ztree.core-3.5.js"></script>
            <script type="text/javascript">
        </script>
<script type="text/javascript">
            function toggle(t) {
            if(document.getElementById("div"+t).style.display == "none") {
                document.getElementById("div"+t).style.display = "block";
                document.getElementById("imgMinus"+t).style.display = "block";
                document.getElementById("imgPlus"+t).style.display = "none";
            } else {
                document.getElementById("div"+t).style.display = "none";
                document.getElementById("imgMinus"+t).style.display = "none";
                document.getElementById("imgPlus"+t).style.display = "block";
            }
        } 
        </script>
        <SCRIPT type="text/javascript">
        <!--
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        var zNodes =[
            { id:1, pId:0, name:"pNode 1", open:true},
            { id:11, pId:1, name:"pNode 11"},
            { id:111, pId:11, name:"leaf node 111"},
            { id:112, pId:11, name:"leaf node 112"},
            { id:113, pId:11, name:"leaf node 113"},
            { id:114, pId:11, name:"leaf node 114"},
            { id:12, pId:1, name:"pNode 12"},
            { id:121, pId:12, name:"leaf node 121"},
        ];

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
        //-->
    </SCRIPT>
        ]]#

    </head>
    <body>  
        <div class="content_wrap">
            <div>
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
        #set( $countId = 0 )
        #createSVNIndexHtml($logEntryList)
    </body>
</html>

#macro(createSVNIndexHtml $logEntryList)

    #foreach ($child in $logEntryList)
        #set( $countId = $countId + 1 )
                #if( $child.childNodes.size() > 0 )
                    <li>
                #else
                    <li>
                #end
                <table>
                <tr>
                    <td>
                        #if( $child.childNodes.size() > 0 )

                            <img id="imgMinus$countId" onclick="toggle('$countId')" src="#if($path)$path\tree\img\Minus.gif#{else}.\Config\img\Minus.gif#end" />
                            <img id="imgPlus$countId" style="display:none;" onclick="toggle('$countId')" src="#if($path)$path\tree\img\Plus.gif#{else}.\Config\img\Plus.gif#end" />
                        #end
                        #set( $fileName = "log/$child.fileName")

                    </td>
                    <td>
                        <a href="$fileName">$child.name</a>
                    </td>
                </tr>
            </table>
            #if( $child.childNodes.size() > 0 )
                <ul id="div$countId" class="ztree">
                    #createSVNIndexHtml($child.childNodes)
                </ul>
            #end
            </li>
        #end
    #end

*Note:*I already got tree view with this code(not include zTree script that is copy from ztree example)

Solution

Finally I got answer.Here is code.

    <html>
    <head>
        #[[
            <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <link rel="stylesheet" href="tree/demo.css" type="text/css">
            <link rel="stylesheet" href="tree/zTreeStyle.css" type="text/css">
            <script type="text/javascript" src="tree/js/jquery-1.4.4.min.js"></script>
            <script type="text/javascript" src="tree/js/jquery.ztree.core-3.5.js"></script>
        ]]#
        <script type="text/javascript">
            var setting = {
                data: {
                    simpleData: {
                        enable:true,
                        idKey: "id",
                        pIdKey: "pId",
                        rootPId: ""
                    }
                },
                callback: {
                    beforeClick: function(treeId, treeNode) {
                        window.open(treeNode.file, "_blank", 'toolbar=0,location=0,menubar=0');
                        return true;
                    }
                }
            };

            var zNodes =[
                #createSVNIndexHtml($logEntryList)
            ];

            $(document).ready(function(){
                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            }); 
        </script>       
    </head>
    <body>      
        <center><h1>Z Tree</h1></center>        
        <div>
            <ul id="treeDemo" class="ztree"></ul>
        </div>
    </body>
</html>

#macro(createSVNIndexHtml $logEntryList)
    #foreach ($child in $logEntryList)
        #if( !$child.ParentNode )
            {id:$child.id, pId:0, name:"$child.name", file:"log/$child.fileName"},
        #else
            {id:$child.id, pId:$child.ParentNode.Id, name:"$child.name", file:"log/$child.fileName"},
        #end
        #if( $child.childNodes.size() > 0 )
            #createSVNIndexHtml($child.childNodes)
        #end        
    #end
#end