您的位置：首页 > Web前端 > JQuery

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

2017-11-23 15:29 901 查看

一：首先看下功能的界面

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

        }

    }

});

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航