Sunday, April 11, 2010

Dynamic Tree Menu,jquery,dynatree,json,php

This is how i made dynamic menu, data is retrieve from oracle database generated by usermenu.php, with json as data output using standard php json_encode. Result menu data is setup relate to user login id so output will be differ depends on login id.


Output usermenu.php JSON data :


[
    {"title":"Site Home","url":"main.php","key":"0",
        "children":[
            {"title":"1.0","key":"1",
                "children":[
                    {"title":"1.0.1","icon":"images/img/home.gif","url":"1.0.1.php","key":"2"},
                    {"title":"1.0.2","icon":"images/img/question.gif","url":"1.0.2.php","key":"3"},
                    {"title":"1.0.3","icon":"images/img/lock.gif","url":"1.0.3.php","key":"4"}
                ]
            },
            {"title":"2.0","icon":"images/img/imgfolder.gif","key":"17",
                "children":[
                    {"title":"2.0.1","url":"2.0.1.php","key":"18"},
                    {"title":"2.0.2","url":"2.0.2.php","key":"19"},
                    {"title":"2.0.1","url":"2.0.3.php","key":"20"}
                ]
            }
        ]
    }
]

<head>
<script type="text/javascript">
    function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
     }
    
    idlogin = readCookie('login');
         
    $(function(){
        $("#menu").dynatree({                         
            initAjax: {
                    url: "usermenu.php?idlogin="+idlogin ,
                    dataType:"json",
                    data:{
                        key:"key",
                        mode:"all"
                      
                    }
                },
            imagePath: "images/img",

            persist: true,
            onActivate: function(dtnode) {              
                if( dtnode.data.url )              
                    window.location.href=dtnode.data.url;                  
            }
        });
                       
        $("#btnCollapseAll").click(function(){
            $("#menu").dynatree("getRoot").visit(function(dtnode)
            {
                    dtnode.expand(false);
            });
                return false;
        });
      
        $("#btnExpandAll").click(function(){
            $("#menu").dynatree("getRoot").visit(function(dtnode)
            {
                    dtnode.expand(true);
            });
                return false;
        });           
    });
   
</script>
</head>

<body>
<table width="100%" border="0" cellpadding="4" cellspacing="0">
  <tr class="header">
    <td><img src="images/folder.gif"></td>
    <td width="100%">
        <a href="#" id="btnExpandAll">Expand all</a>|
        <a href="#" id="btnCollapseAll">Collapse all</a>        
    </td>
  </tr>
</table>
<br>

<div id="menu" style="margin-left: 2px;">
</div>
<br>

</body>
at Sunday, April 11, 2010
Labels: , , ,

0 comments:

Post a Comment