EasyUI选项卡案例

最新推荐文章于 2023-04-16 10:08:28 发布

Sisu.

最新推荐文章于 2023-04-16 10:08:28 发布

阅读量182

点赞数

本文链接：https://blog.youkuaiyun.com/L_Sisu/article/details/103393756

版权

选项卡案例

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:false" style="height:100px;"></div>
<div data-options="region:'south',title:'South Title',split:false" style="height:100px;"></div>
<%--<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>--%>

<%--树控件，可以折叠，展开--%>
<div data-options="region:'west',title:'菜单导航',split:true" style="width:200px;maxWidth:500px;" >

    <div id="aa" class="easyui-accordion" style="width:300px;height:200px;" data-options="fit:true,border:false">
        <div title="基本功能" data-options="selected:true" style="overflow:auto;">
            <ul id="treeMenu" class="ztree"></ul>
        </div>
        <div title="系统功能" data-options="" style="padding:10px;">
            content2
        </div>

    </div>
</div>


<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
    <div id="tt" class="easyui-tabs" style="">
        <div title="Tab1" style="padding:20px;display:none;">
            tab1
        </div>
    </div>

</div>


<script>
    var setting = {
        data: {
            simpleData: {
                enable: true,
                dKey:"id",
                pidKey:"pid",
                rootPid:0
            }
        },
        callback: {
            onClick: function(event, treeId, treeNode){
                // 判断是否为父节点，如果为父节点，什么都不做
                if(treeNode.isParent){

                }else{
                    // 如果为子节点，检查已打开的选项卡中是否有，
                    if ($("#tt").tabs("exists",treeNode.name)){
                        // 如果有选中此选项卡
                        $("#tt").tabs("select",treeNode.name);

                    }else {
                        // 如果没有添加选项卡
                        $('#tt').tabs('add',{
                            title: treeNode.name,
                            selected: true,
                            closable:true,
                            content:treeNode.name,
                        });
                    }
                }
            }
        }


    };
    var zNodes =[
        { "id":"11", "pId":"0", "name":"基础数据"},
        { "id":"112", "pId":"11", "name":"取派员设置",},
        { "id":"113", "pId":"11", "name":"区域设置",},
        { "id":"114", "pId":"11", "name":"管理分区"},
        { "id":"115", "pId":"11", "name":"管理定区/调度排班"},
        { "id":"12", "pId":"0", "name":"受理"},
        { "id":"121", "pId":"12", "name":"业务受理" },
        { "id":"122", "pId":"12", "name":"工作单快速录入" },
        { "id":"124", "pId":"12", "name":"工作单导入" ,},
        { "id":"13", "pId":"0", "name":"调度"},
        { "id":"131", "pId":"13", "name":"查台转单",},
        { "id":"132", "pId":"13", "name":"人工调度"}
    ];

    $(function(){
        $.fn.zTree.init($("#treeMenu"), setting, zNodes);

    });
</script>

</body>
</html>