easyui树形菜单，自动化添加tab

最新推荐文章于 2023-07-12 11:55:11 发布

OxygenChen

最新推荐文章于 2023-07-12 11:55:11 发布

阅读量992

点赞数

分类专栏：前端文章标签： easyui 树选项卡

本文链接：https://blog.csdn.net/cx15733896285/article/details/79917165

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

效果如图
这里写图片描述

1.先来一段js代码

<script type="text/javascript">
        $(function () {
            //动态菜单数据
            //创建三个一级菜单，每个一级菜单下有2个二级菜单
            var treeData =[{
                id:1,
                text:"一级菜单1",
                state:"closed",
                children:[{
                    id:11,
                    text:"二级菜单11",
                    attributes:{
                        url:"Demo.html"
                    }
                },{
                    id:12,
                    text:"二级菜单12",
                    attributes:{
                        url:""
                    }
                }]
            },{
                id:2,
                text:"一级菜单2",
                state:"closed",
                children:[{
                    id:21,
                    text:"二级菜单21",
                    attributes:{
                        url:""
                    }
                },{
                    id:22,
                    text:"二级菜单21",
                    attributes:{
                        url:""
                    }
                }]
            },{
                id:3,
                text:"一级菜单3",
                state:"closed",
                children:[{
                    id:31,
                    text:"二级菜单31",
                    attributes:{
                        url:""
                    }
                },{
                    id:32,
                    text:"二级菜单32",
                    attributes:{
                        url:""
                    }
                }]
            }];
            //实例化树形菜单
            $("#tree").tree({
                data : treeData,
                lines : true,
                onClick : function (node) {
                    if (node.attributes) {
                        Open(node.text, node.attributes.url);
                    }
                }
            });
            //在右边center区域打开菜单，新增tab
            function Open(text, url) {
                var content = '<iframe scrolling="auto" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';

                if ($("#tabs").tabs('exists', text)) {
                    $('#tabs').tabs('select', text);
                } else {
                    $('#tabs').tabs('add', {
                        title : text,
                        closable : true,
                        content : content
                    });
                }
            }
            //绑定tabs的右键菜单
            $("#tabs").tabs({
                onContextMenu : function (e, title) {
                    e.preventDefault();
                    $('#tabsMenu').menu('show', {
                        left : e.pageX,
                        top : e.pageY
                    }).data("tabTitle", title);
                }
            });
            //实例化menu的onClick事件
            $("#tabsMenu").menu({
                onClick : function (item) {
                    CloseTab(this, item.name);
                }
            });
            //几个关闭事件的实现
            function CloseTab(menu, type) {
                var curTabTitle = $(menu).data("tabTitle");
                var tabs = $("#tabs");
                if (type == "close") {
                    tabs.tabs("close", curTabTitle);
                    return;
                }
                var allTabs = tabs.tabs("tabs");
                var closeTabsTitle = [];

                $.each(allTabs, function () {
                    var opt = $(this).panel("options");
                    if (opt.closable && opt.title != curTabTitle && type == "Other") {
                        closeTabsTitle.push(opt.title);
                    } else if (opt.closable && type == "All") {
                        closeTabsTitle.push(opt.title);
                    }
                });

                for (var i = 0; i < closeTabsTitle.length; i++) {
                    tabs.tabs("close", closeTabsTitle[i]);
                }
            }
        });
    </script>

2.再来一段html

<body class="easyui-layout">
    <div data-options="region:'north',title:'Logo+名称',split:false,collapsible:false" style="height:70px;background:#E8F1FF "></div>
    <div data-options="region:'south',title:'foot',split:true,collapsible:false" style="height:100px;"></div>
    <div data-options="region:'east',title:'东部区域',split:true" style="width:300px;">
        <div class="easyui-calendar" style="width: 300px;height: 250px;"></div>
        <hr>
    </div>
    <div data-options="region:'west',title:'收起菜单',split:true" style="width:300px;">
        <!--折叠菜单面板-->
        <div class="easyui-accordion" data-options="fit:true,border:false">
            <div title="树菜单" style="padding: 10px;">
                <ul id="tree"></ul>
            </div>
            <div id="tabsMenu" class="easyui-menu" style="width:120px;">
                <div name="close">关闭</div>
                <div name="Other">关闭其他</div>
                <div name="All">关闭所有</div>
            </div>
            <div title="菜单二" style="padding: 10px;">内容二</div>
            <div title="菜单三" style="padding: 10px;">内容三</div>
        </div>
    </div>
    <div data-options="region:'center',title:'内容区域'" style="padding:5px;">
        <div class="easyui-tabs" fit="true" border="false" id="tabs">
            <div title="首页"></div>
        </div>
    </div>
</body>

OxygenChen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyui树形菜单，自动化添加tab

效果如图 1.先来一段js代码&lt;script type="text/javascript"&gt; $(function () { //动态菜单数据 //创建三个一级菜单，每个一级菜单下有2个二级菜单 var treeData =[{ id:1, ...
复制链接

扫一扫

专栏目录