EasyUI左侧tree，右侧tab布局

最新推荐文章于 2022-12-22 17:32:04 发布

Zero_shan

最新推荐文章于 2022-12-22 17:32:04 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/Zero_shan/article/details/78082559

版权

一个简单的页面布局，用的是EasyUI布局页面，左边是一个tree，右边是内容页面。把代码记录下来方面以后的查阅。

jsp页面

 
 <body class="easyui-layout">
        <!-- 左边树形布局 -->
        <div data-options="region:'north'" style="height:40px"></div>
        <div data-options="region:'west',title:'North',split:true" style="width:150px">
            <ul id="wst"></ul>
        </div>
        <!-- 右边显示内容 -->
        <div data-options="region:'center',title:'Center'" style="padding:5px">
            <div id="tabs" class="easyui-tabs" data-options="fit:true, border:false"></div>
        </div>
</body>

JS代码

 
 $(function() {
    $("#wst").tree({
        // 左侧tree部分的数据
        url : "index.json",
        onClick : function(node) {
            openPage(node);
        }
    });
    function openPage(node) {
        // 检验是否存在tab,如果存在，则打开已有的
        if ($("#tabs").tabs('exists', node.text)) {
            $("#tabs").tabs('select', node.text);
        } else {
            // 如果没有此tab，创建一个新的tab
            $("#tabs").tabs('add', {
                title : node.text,
                content : node.text,
                closable : true
            })
        }
    }
})

数据内容

 
 [{
    "id" : 1,
    "text" : "Node 1",
    "state" : "closed",
    "children" : [{
        "id" : 11,
        "text" : "Node 11"
    },{
        "id" : 12,
        "text" : "Node 12"
    }]
},{
    "id" : 2,
    "text" : "Node 2",
    "state" : "closed",
    "children" : [{
        "id" : 21,
        "text" : "Node 21"
    },{
        "id" : 22,
        "text" : "Node 22"
    }]
},{
    "id" : 3,
    "text" : "Node 3"
}]

此时都是将内容写死，后面需要从数据中获取数据，再研究。

Zero_shan

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
EasyUI左侧tree，右侧tab布局

一个简单的页面布局，用的是EasyUI布局页面，左边是一个tree，右边是内容页面。把代码记录下来方面以后的查阅。jsp页面 class="easyui-layout"> data-options="region:'north'" style="height:40px"> data-options="region:'west',title
复制链接

扫一扫