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

来源：互联网发布：淘宝一键模板编辑：程序博客网时间：2024/05/22 13:38

一：首先看下功能的界面

二：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]);        }    }});

1 0