一:首先看下功能的界面
二: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]);
- }
- }
- });
版权声明:本文为博主原创文章,未经博主允许不得转载。