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

最新推荐文章于 2020-03-12 20:09:51 发布

乔志勇笔记

最新推荐文章于 2020-03-12 20:09:51 发布

阅读量1.4k

点赞数 1

java 前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

一：首先看下功能的界面

二：jsp页面

[html]view plain copy 
     
 <%@ 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

[javascript]view plain copy 
     
 $(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]);  
         }  
     }  
 });  

乔志勇笔记

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jquery easyui实现树形(Tree)菜单点击，在content页生成Tab功能

一：首先看下功能的界面二：jsp页面[html] view plain copy%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> > html> head> met
复制链接

扫一扫