tree前端

 一、样式

二、演示

将静态数据导入Webcontent包中

tree_data1.json

[{
    "id":1,
    "text":"My Documents",
    "children":[{
        "id":11,
        "text":"Photos",
        "state":"closed",
        "children":[{
            "id":111,
            "text":"Friend"
        },{
            "id":112,
            "text":"Wife"
        },{
            "id":113,
            "text":"Company"
        }]
    },{
        "id":12,
        "text":"Program Files",
        "children":[{
            "id":121,
            "text":"Intel"
        },{
            "id":122,
            "text":"Java",
            "attributes":{
                "p1":"Custom Attribute1",
                "p2":"Custom Attribute2"
            }
        },{
            "id":123,
            "text":"Microsoft Office"
        },{
            "id":124,
            "text":"Games",
            "checked":true
        }]
    },{
        "id":13,
        "text":"index.html"
    },{
        "id":14,
        "text":"about.html"
    },{
        "id":15,
        "text":"welcome.html"
    }]
}]
 

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

在数控中可以定义一个空<ul>元素并使用JavaScript加载数据

 在js文件中建立file文件，用于加载数据，界面jsp引入数据js

 js

 jsp

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

展示效果 

 点击左侧显示右侧tab

1、给菜单添加点击事件

$(function(){
    /**
     * $.ajax无刷新
     * $.extends("hello",function(){
     *   alter("hello")
     * })
     * $.hello();
     * 1、tree方法时通过$.extends()拓展出来的
     * 2、tree方法做的事情
     * 
     * 需求：
     * 1、点击左侧显示右侧tab
     * 1.1给菜单添加点击事件
     * 1.2调用tabs选项卡打开对应的页面
     *    选项卡打开
     *    选项卡对应页面展示
     * 
     */
    $('#tt').tree({
        url:'tree_data1.json',
            onClick:function(node){
                alert(node.text);//在用户点击的时候提示 
            }
    });
})

2、新建对应的打页面

 

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

{
        "id":12,
        "text":"Program Files",
        "children":[{
            "id":121,
            "text":"Intel",
                "attributes":{
                "url":"demo1.jsp",
                "p2":"Custom Attribute2"
            }
        },{
            "id":122,
            "text":"Java",
            "attributes":{
                "url":"demo2.jsp",
                "p2":"Custom Attribute2"
            }
        },

将代码复制在内容区

 <div data-options="region:'center',title:'center', title:'内容取'" style="padding:5px;background:#eee;"></div>   
    <div id="stuTabs" class="easyui-tabs" style="width:100%;height:100%;"></div>

 运行结果