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

一:首先看下功能的界面

jquery easyui实现树形(Tree)菜单点击,在content页生成Tab功能_第1张图片

二:jsp页面

[html]  view plain  copy
  1. <%@ page language="java" contentType="text/html; charset=utf-8"  
  2.     pageEncoding="utf-8"%>  
  3. >  
  4.   
  5. <html>  
  6. <head>  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  8. <title>Hbase数据查询title>  
  9.   
  10. <script type="text/javascript" src="js/easyui/jquery.min.js">script>  
  11. <script type="text/javascript" src="js/easyui/jquery.easyui.min.js">script>     
  12. <script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js">script>   
  13. <script type="text/javascript" src="js/god/queryHbase.js">script>  
  14. <link rel="stylesheet" type="text/css" href="js/easyui/themes/default/easyui.css" />  
  15. <link rel="stylesheet" type="text/css" href="js/easyui/themes/icon.css" />     
  16.   
  17. head>  
  18. <body class="easyui-layout">  
  19.       
  20.     <div region="north" split="true" style="height:60px;font-size: 26px;text-align: center;padding: 8px;background-color: #D1EEEE">数据查询div>  
  21.       
  22.       
  23.     <div region="west" style="width:180px" title="Hbase查询功能列表" split="true">  
  24.           
  25.         <ul id="tree">ul>  
  26.     div>  
  27.       
  28.       
  29.     <div region="center">  
  30.         <div class="easyui-tabs" fit="true" border="false" id="tabs">  
  31.            <div title="首页">欢迎来到Hbase价格库存查询页面div>  
  32.         div>  
  33.     div>  
  34. body>  
  35. html>  

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

queryHbase.js
[javascript]  view plain  copy
  1. $(function () {  
  2.     //动态树形菜单数据  
  3.     var treeData = [{  
  4.           text : "Hbase查询功能列表",  
  5.           children : [{  
  6.                   text : "具体数据查询",  
  7.                   children : [{  
  8.                           text : "单一商品价格库存",  
  9.                           attributes : {  
  10.                               url : ''  
  11.                           }  
  12.                       }, {  
  13.                           text : "单一商品价格库存2",  
  14.                           attributes : {  
  15.                               url : ''  
  16.   
  17.                           }  
  18.                       }  
  19.                   ]  
  20.               },{  
  21.                   text : "数据量查询",  
  22.                   children : [{  
  23.                           text : "总量统计",  
  24.                           attributes : {  
  25.                               url : ''  
  26.                           }  
  27.                       }, {  
  28.                           text : "总量统计2",  
  29.                           attributes : {  
  30.                               url : ''  
  31.                           }  
  32.                       }  
  33.                   ]  
  34.               }  
  35.           ]  
  36.       }  
  37.   ];  
  38.       
  39.     //实例化树形菜单  
  40.     $("#tree").tree({  
  41.         data : treeData,  
  42.         lines : true,  
  43.         onClick : function (node) {  
  44.             if (node.attributes) {  
  45.                 Open(node.text, node.attributes.url);  
  46.             }  
  47.         }  
  48.     });  
  49.     //在右边center区域打开菜单,新增tab  
  50.     function Open(text, url) {  
  51.         if ($("#tabs").tabs('exists', text)) {  
  52.             $('#tabs').tabs('select', text);  
  53.         } else {  
  54.             $('#tabs').tabs('add', {  
  55.                 title : text,  
  56.                 closable : true,  
  57.                 content : url  
  58.             });  
  59.         }  
  60.     }  
  61.       
  62.     //绑定tabs的右键菜单  
  63.     $("#tabs").tabs({  
  64.         onContextMenu : function (e, title) {  
  65.             e.preventDefault();  
  66.             $('#tabsMenu').menu('show', {  
  67.                 left : e.pageX,  
  68.                 top : e.pageY  
  69.             }).data("tabTitle", title);  
  70.         }  
  71.     });  
  72.       
  73.     //实例化menu的onClick事件  
  74.     $("#tabsMenu").menu({  
  75.         onClick : function (item) {  
  76.             CloseTab(this, item.name);  
  77.         }  
  78.     });  
  79.       
  80.     //几个关闭事件的实现  
  81.     function CloseTab(menu, type) {  
  82.         var curTabTitle = $(menu).data("tabTitle");  
  83.         var tabs = $("#tabs");  
  84.           
  85.         if (type === "close") {  
  86.             tabs.tabs("close", curTabTitle);  
  87.             return;  
  88.         }  
  89.           
  90.         var allTabs = tabs.tabs("tabs");  
  91.         var closeTabsTitle = [];  
  92.           
  93.         $.each(allTabs, function () {  
  94.             var opt = $(this).panel("options");  
  95.             if (opt.closable && opt.title != curTabTitle && type === "Other") {  
  96.                 closeTabsTitle.push(opt.title);  
  97.             } else if (opt.closable && type === "All") {  
  98.                 closeTabsTitle.push(opt.title);  
  99.             }  
  100.         });  
  101.           
  102.         for (var i = 0; i < closeTabsTitle.length; i++) {  
  103.             tabs.tabs("close", closeTabsTitle[i]);  
  104.         }  
  105.     }  
  106. });  




版权声明:本文为博主原创文章,未经博主允许不得转载。

你可能感兴趣的:(java,前端)