jquery easyui实现树形(Tree)菜单点击，在content页生成Tab功能

时间：2022-05-29 15:02:17

一：首先看下功能的界面

jquery easyui实现树形(Tree)菜单点击，在content页生成Tab功能

二：jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hbase数据查询</title>

<script type="text/javascript" src="js/easyui/jquery.min.js"></script>
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>   
<script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script> 
<script type="text/javascript" src="js/god/queryHbase.js"></script>
<link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css" />   

</head>
<body class="easyui-layout">
<!--  页面上方区域     -->
<div region="north" split="true" style="height:60px;font-size: 26px;text-align: center;padding: 8px;background-color: #D1EEEE">数据查询</div>

    <!--  页面左边区域    -->
    <div region="west" style="width:180px" title="Hbase查询功能列表" split="true">
    <!-- 树形结构的功能列表 -->
    <ul id="tree"></ul>
    </div>

    <!--  页面中间内容（主面板）区域     -->
    <div region="center">
    <div class="easyui-tabs" fit="true" border="false" id="tabs">
       <div title="首页">欢迎来到Hbase价格库存查询页面</div>
    </div>
    </div>
</body>
</html>

三：jsp页面引入的生成Tree的JS

 queryHbase.js 
$(function () {
    //动态树形菜单数据
    var treeData = [{
      text : "Hbase查询功能列表",
          children : [{
                  text : "具体数据查询",
                  children : [{
                          text : "单一商品价格库存",
                          attributes : {
                              url : '<iframe width="100%" height="100%" frameborder="0"  src="jsp/queryPriceStock.jsp" style="width:100%;height:100%;margin:0px 0px;"></iframe>'
                          }
                      }, {
                          text : "单一商品价格库存2",
                          attributes : {
                              url : ''

                          }
                      }
                  ]
              },{
                  text : "数据量查询",
                  children : [{
                          text : "总量统计",
                          attributes : {
                          url : '<iframe width="100%" height="100%" frameborder="0"  src="jsp/queryPriceStock.jsp" style="width:100%;height:100%;margin:0px 0px;"></iframe>'
                          }
                      }, {
                          text : "总量统计2",
                          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) {
        if ($("#tabs").tabs('exists', text)) {
            $('#tabs').tabs('select', text);
        } else {
            $('#tabs').tabs('add', {
                title : text,
                closable : true,
                content : url
            });
        }
    }

    //绑定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]);
        }
    }
});

标签：

相关文章