一、效果

二、編碼

　　數據庫設計

數據庫函數設計，該函數根據父節點id 查詢出所有字節點（包括孫子節點）

BEGIN
#聲明兩個臨時變量
DECLARE temp VARCHAR(1000);
DECLARE tempChd VARCHAR(1000);
SET temp = '0';
SET tempChd=CAST(rootId AS CHAR);#把rootId強制轉換為字符
WHILE tempChd is not null DO
SET temp = CONCAT(temp,',',tempChd);#循環把所有節點連接成字符串。
SELECT GROUP_CONCAT(menu_id) INTO tempChd FROM menu where FIND_IN_SET(parent_id,tempChd)>0;
END WHILE;
RETURN temp;

END

index.jsp

<body class="easyui-layout">
    
<a href="<%=path%>/servlet/getAccordion">系統布局</a>
</body>

```
/servlet/getAccordion的servlet
```

@WebServlet("/servlet/getAccordion")
public class AccordionServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        
        Connection conn=null;
        String sql="";
        try {
            QueryRunner queryRunner=new QueryRunner();
            conn=DBUtil.getConn();
            sql="select * from menu where grade=1";
            
            List<Menu> menuList=queryRunner.query(conn, sql, new BeanListHandler<>(Menu.class));
            request.setAttribute("menuList", menuList);
        } catch (Exception e) {
            e.printStackTrace();
        }
        
        request.getRequestDispatcher("/systemLayout.jsp").forward(request, response);
        
    }

}

```
systemLayout.jsp
```

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html >
<html>
<%
    String path = request.getContextPath();
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
    href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css"
    href="<%=path%>/script/easyUI-1.4/themes/icon.css">
<script type="text/javascript"
    src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>
<script type="text/javascript"
    src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>
<script type="text/javascript"
    src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
    

    
    jQuery(function(){
        //初始化左側菜單
        <c:forEach var="menuBean" items="${requestScope.menuList}">
        var menuid="${menuBean.menu_id}";
        jQuery("#treeMenu_div${menuBean.menu_id}").tree({
            url:    "<%=path%>/servlet/getData?menu_id=" + menuid + "",
            onClick: function(node){
                addTab(node.text,node.href1,"icon-blank");
            }

        });
        </c:forEach>

        tabClose();
        tabCloseEven();
    });

    /**
    *該函數用於創建一個新的選項卡
    *subtitle:選項卡標題  url：選項卡鏈接地址  icon:選項卡的圖標
    */
    function addTab(subtitle, url, icon) {
        if (!$('#tabs').tabs('exists', subtitle)) {
            $('#tabs').tabs('add', {
                title : subtitle,
                content : createFrame(url),
                closable : true,
                icon : icon
            });
        } else {
            $('#tabs').tabs('select', subtitle);
            $('#mm-tabupdate').click();
        }
        tabClose();
    }

    /**
    *該函數用於創建一個iframe，該iframe顯示的內容為鏈接的url
    */
    function createFrame(url) {
        var s = '<iframe scrolling="auto" frameborder="0"  src="' + url
                + '" style="width:100%;height:100%;"></iframe>';
        return s;
    }

    
    /**
    *該函數雙擊關閉TAB選項卡和為選項卡綁定右鍵
    */
    function tabClose() {
        /*雙擊關閉TAB選項卡*/
        $(".tabs-inner").dblclick(function() {
            var subtitle = $(this).children(".tabs-closable").text();
            $('#tabs').tabs('close', subtitle);
        })
        /*為選項卡綁定右鍵*/
        $(".tabs-inner").bind('contextmenu', function(e) {
            $('#mm').menu('show', {
                left : e.pageX,
                top : e.pageY
            });

            var subtitle = $(this).children(".tabs-closable").text();

            $('#mm').data("currtab", subtitle);
            $('#tabs').tabs('select', subtitle);
            return false;
        });
    }
    
    /**
    *該函數綁定並實現菜單右擊事現
    */
    function tabCloseEven() {
        //刷新
        $('#mm-tabupdate').click(function() {
            var currTab = $('#tabs').tabs('getSelected');
            var url = $(currTab.panel('options').content).attr('src');
            $('#tabs').tabs('update', {
                tab : currTab,
                options : {
                    content : createFrame(url)
                }
            })
        })
        //關閉當前
        $('#mm-tabclose').click(function() {
            var currtab_title = $('#mm').data("currtab");
            $('#tabs').tabs('close', currtab_title);
        })
        //全部關閉
        $('#mm-tabcloseall').click(function() {
            $('.tabs-inner span').each(function(i, n) {
                var t = $(n).text();
                $('#tabs').tabs('close', t);
            });
        });
        //關閉除當前之外的TAB
        $('#mm-tabcloseother').click(function() {
            $('#mm-tabcloseright').click();
            $('#mm-tabcloseleft').click();
        });
        //關閉當前右側的TAB
        $('#mm-tabcloseright').click(function() {
            var nextall = $('.tabs-selected').nextAll();
            if (nextall.length == 0) {
                //msgShow('系統提示','后邊沒有啦~~','error');
                alert('后邊沒有啦~~');
                return false;
            }
            nextall.each(function(i, n) {
                var t = $('a:eq(0) span', $(n)).text();
                $('#tabs').tabs('close', t);
            });
            return false;
        });
        //關閉當前左側的TAB
        $('#mm-tabcloseleft').click(function() {
            var prevall = $('.tabs-selected').prevAll();
            if (prevall.length == 0) {
                alert('到頭了，前邊沒有啦~~');
                return false;
            }
            prevall.each(function(i, n) {
                var t = $('a:eq(0) span', $(n)).text();
                $('#tabs').tabs('close', t);
            });
            return false;
        });

        //退出
        $("#mm-exit").click(function() {
            $('#mm').menu('hide');
        })
    }
</script>

</head>
<body class="easyui-layout">

    <div data-options="region:'north',split:true,border:false"
        style="overflow: hidden; height: 30px;">
        <span style="float: right; padding-right: 20px;">歡迎 半顆檸檬 <a
            href="#">修改密碼</a> <a href="#">退出</a>
        </span>
    </div>


    <!-- 左側菜單 -->
    <div region="west" class="west" style="width: 150px"
        data-options="hide:true,split:true">
        <div id="aa" class="easyui-accordion"
            data-options="fit:true,border:false"
            style="width: 300px; height: 200px; margin: 0px; padding: 0px;">
            <!--  菜單   -->
            <c:forEach var="menuBean" items="${requestScope.menuList}">
                <div title="${menuBean.menu_name}" icon="icon-sys"
                    style="overflow: auto;">
                    <div id="treeMenu_div${menuBean.menu_id}"></div>
                </div>
            </c:forEach>
        </div>
    </div>


    <div region="center">
        <div id="tabs" class="easyui-tabs" fit="true" border="false">
            <div title="歡迎使用"
                style="padding: 20px; overflow: hidden; color: red;">
                <h1 style="font-size: 24px;">歡迎使用xx系統</h1>

            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div region="south" split="true" style="height: 30px">
        <div class="footer" style="text-align: center;">公司版權信息</div>

    </div>

<!-- 選項卡右鍵菜單 -->
    <div id="mm" class="easyui-menu" style="width: 150px;">
        <div id="mm-tabupdate">刷新</div>
        <div class="menu-sep"></div>
        <div id="mm-tabclose">關閉</div>
        <div id="mm-tabcloseall">全部關閉</div>
        <div id="mm-tabcloseother">除此之外全部關閉</div>
        <div class="menu-sep"></div>
        <div id="mm-tabcloseright">當前頁右側全部關閉</div>
        <div id="mm-tabcloseleft">當前頁左側全部關閉</div>
        <div class="menu-sep"></div>
        <div id="mm-exit">退出</div>
    </div>

</body>
</html>

/servlet/getData 的servlet

@WebServlet("/servlet/getData")
public class GetDataServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        String menu_id = request.getParameter("menu_id");
        String sql = "select * from menu where grade>1 and FIND_IN_SET(menu_Id,fn_getAddress_ChildList_test("+menu_id+"))";
        try {
            Connection conn = DBUtil.getConn();

            QueryRunner queryRunner = new QueryRunner();

            List<Map<String, Object>> treeList = new ArrayList<Map<String, Object>>();

            List<Menu> menuList = queryRunner.query(conn, sql, new BeanListHandler<>(Menu.class));
            Map<String, Map<String, Object>> id_nodeMap = new HashMap<String, Map<String, Object>>();
            Map<String, Object> nodeMap = null;
            for (Menu menu : menuList) {
                nodeMap = new HashMap<String, Object>();
                nodeMap.put("id", menu.getMenu_id());
                nodeMap.put("text", menu.getMenu_name());
                nodeMap.put("href1", menu.getHref());
                id_nodeMap.put(String.valueOf(menu.getMenu_id()), nodeMap);

                if (menu.getParent_id() == Integer.valueOf(menu_id)) {
                    treeList.add(nodeMap);
                } else {

                    Map<String, Object> parenMap = id_nodeMap.get(String.valueOf(menu.getParent_id()));

                    if (parenMap != null) {
                        List<Map<String, Object>> children = null;

                        if (parenMap.get("children") == null) {
                            // 說明該父節點當前還沒有一個子節點
                            children = new ArrayList<Map<String, Object>>();
                        } else {
                            children = (List<Map<String, Object>>) parenMap.get("children");
                        }
                        children.add(nodeMap);
                        parenMap.put("children", children);
                    }

                }

            }

            Gson gson = new Gson();

            String json_res = gson.toJson(treeList);

            out.print(json_res);
            out.flush();
            out.close();

        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    
}

Menu.java

package bean;

public class Menu {
    private String menu_id;
    private String menu_name;
    private String href;
    private String isLeaf;
    private int parent_id;
    private int grade;

    public String getMenu_id() {
        return menu_id;
    }

    public void setMenu_id(String menu_id) {
        this.menu_id = menu_id;
    }

    public String getMenu_name() {
        return menu_name;
    }

    public void setMenu_name(String menu_name) {
        this.menu_name = menu_name;
    }

    public String getHref() {
        return href;
    }

    public void setHref(String href) {
        this.href = href;
    }

    public String getIsLeaf() {
        return isLeaf;
    }

    public void setIsLeaf(String isLeaf) {
        this.isLeaf = isLeaf;
    }

    public int getParent_id() {
        return parent_id;
    }

    public void setParent_id(int parent_id) {
        this.parent_id = parent_id;
    }

    public int getGrade() {
        return grade;
    }

    public void setGrade(int grade) {
        this.grade = grade;
    }

}

結果：

所有代碼都在：here

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 （八）easyUI之Accordion折疊面板：動態面板 java web前端easyui（layout+tree+雙tabs）布局+樹+2個選項卡tabs EasyUI---layout布局、樹形組件、選項卡tabs Collapse 折疊面板 accordion（折疊面板）的使用 Jquery Accordion 折疊面板 jQuery EasyUI 教程-Tabs（選項卡） js實現折疊面板 CSS實現折疊面板 jquery easyui使用（二）······可折疊面板動態加載無效果

（十）easyUI之折疊面板+選項卡+樹完成系統布局

一、效果

二 、編碼

免責聲明！

二、編碼