创建 ZTree

使用标准json数据构造ztree

<!-- 展示树形菜单 ：使用标准json数据构造-->
<ul id="ztree1" class="ztree"></ul>
<script type="text/javascript">
    $(function(){
        //当页面加载完成后，动态创建ztree菜单
        var setting = {};//设置ztree相关的属性
        //构造json数据
        var zNodes = [
                      {name:'系统管理'},//每个json对象对应一个节点数据
                      {name:'用户管理',children:[
                                                {name:'用户添加'},
                                                {name:'用户修改'}
                                             ]},//每个json对象对应一个节点数据
                      {name:'权限管理'}//每个json对象对应一个节点数据
                      ];
        //创建ztree
        $.fn.zTree.init($("#ztree1"),setting,zNodes);
    });
</script>

4.2使用简单json数据构造ztree（建议）

<!-- 展示树形菜单 ：使用简单json数据构造-->
<ul id="ztree2" class="ztree"></ul>
<script type="text/javascript">
    $(function(){
        //当页面加载完成后，动态创建ztree菜单
        var setting2 = {
                    data: {
                            simpleData: {
                                enable: true//启用简单json数据描述节点数据 
                            }
                    }
                };//设置ztree相关的属性
        //构造json数据
        var zNodes2 = [
                      {id:'1',pId:'0',name:'系统管理'},//每个json对象对应一个节点数据
                      {id:'2',pId:'0',name:'用户管理'},//每个json对象对应一个节点数据
                      {id:'21',pId:'2',name:'用户添加'},//每个json对象对应一个节点数据
                      {id:'22',pId:'2',name:'用户修改'},//每个json对象对应一个节点数据
                      {id:'3',pId:'0',name:'权限管理'}//每个json对象对应一个节点数据
                      ];
        //创建ztree
        $.fn.zTree.init($("#ztree2"),setting2,zNodes2);
    });
</script>

发送ajax请求获取菜单数据构造ztree

<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
    $(function(){
        var setting3 = {
                data : {
                    simpleData : {
                        enable : true
                    //启用简单json数据描述节点数据 
                    }
                }
            };//设置ztree相关的属性
        //发送ajax请求获取json数据构造ztree
        var url = "${pageContext.request.contextPath}/json/menu.json";
        $.post(url,{},function(data){
            //创建ztree
            $.fn.zTree.init($("#ztree3"), setting3, data);
        },'json');
    });
</script>

为ztree节点绑定事件

<ul id="ztree3" class="ztree"></ul>
<script type="text/javascript">
    $(function(){
        var setting3 = {
                data : {
                    simpleData : {
                        enable : true
                    //启用简单json数据描述节点数据 
                    }
                },
                callback: {//绑定事件 
                    onClick: function(a,b,treeNode){
                        var page = treeNode.page;
                        if(page != undefined){//需要打开选项卡
                            //判断当前选项卡是否已经打开
                            var e = $("#tt").tabs("exists",treeNode.name);
                            if(e){
                                //已经打开
                                $("#tt").tabs("select",treeNode.name);
                            }else{
                                $("#tt").tabs("add",
                                        {
                                            title : treeNode.name,
                                            content : '<iframe frameborder="0" width="100%" height="100%" src="'+page+'"></iframe>',
                                            closable : true,
                                            iconCls : 'icon-edit'
                                        });
                            }
                        }
                    }
                }
            };//设置ztree相关的属性
        //发送ajax请求获取json数据构造ztree
        var url = "${pageContext.request.contextPath}/json/menu.json";
        $.post(url,{},function(data){
            //创建ztree
            $.fn.zTree.init($("#ztree3"), setting3, data);
        },'json');
    });
</script>