tree前端实现

一、目标

本期内容需要完成以下图片的样式：

那让我们继续上一篇内容操作！！！

二、演示

1、将静态数据导入WebContent包中

 

 2、在界面对应的地方写入tree控件代码，也就是此项目的菜单管理

        树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。

 也就是↓：

 3、在js文件中建立File文件(index.js)，用于加载数据，界面jsp引入数据js

 js文件：

$(function(){

/**

 * 1、tree方法时通过$.extends()扩展出来的

 * 2、tree方法做的事情

 *  $('#tt').append();

 */

$('#tt').tree({    

    url:'tree_data1.json'   

});  

})

jsp需要将js引入进来：

<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script>

也就形成了↓界面：

 4、点击左侧显示右侧Tab

(1、给菜单添加点击事件

(2、新建对应的打开页面

（3、调用tabs选项卡打开对应的页面

        ①、在数据文件中添加跳转页面

        ②、将tabs控件代码放入主界面对应位置，如下，放到内容区域

         ③、添加新的选项卡面板，也就是点击左侧菜单内容出现面板

$('#stuMenu').tree({    

    url:'tree_data1.json',

    onClick: function(node){

// alert(node.text);  // 在用户点击的时候提示

// add a new tab panel    

$('#s').tabs('add',{    

    title:node.text,    

    content:node.text+'Tab Body',    

    closable:true,    

    tools:[{    

        iconCls:'icon-mini-refresh',    

        handler:function(){    

            alert('refresh');    

        }    

    }]    

});  

    }

});  

       ④、上面打开了重复的页面，进行优化：

                拿到目前所有打开的tabs选项卡，与将要打开的选项卡做对比（exists）

$('#stuMenu').tree({    

    url:'tree_data1.json',

    onClick: function(node){

// alert(node.text);  // 在用户点击的时候提示

// add a new tab panel

//      判断当前将要打开的选项卡是否存在

     var exists=$('#stuTabs').tabs('exists',node.text);

     if(exists){

    

     }else{

     $('#stuTabs').tabs('add',{    

    title:node.text,    

    content:node.text+'Tab Body',    

    closable:true,    

    tools:[{    

        iconCls:'icon-mini-refresh',    

        handler:function(){    

            alert('refresh');    

        }    

    }]    

});  

     }

    }

});  

解决：不能重复打开页面，但点击不会跳转到已有的页面

        在上面if判断中，如果存在页面添加以下代码：

$('#stuTabs').tabs('select',node.text);

        ⑤、点击菜单跳转对应的页面：改变js界面方法的content，添加iframe标签

  content:'<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>',  

这期内容结束~