（七）easyUI之Accordion折叠面板：普通的静态面板

一、普通的静态面板

• 前台

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>
</head>

<script type="text/javascript">

jQuery(function(){

    $('#tt').tree({
        url:'<%=path%>/servlet/getData',
        method:'POST',
        animate:true
    });  

});
</script>

<body class="easyui-layout">

    <h2>1.普通的折叠面板</h2>
       <div id="aa" class="easyui-accordion" style="width:300px;height:200px;" data-options="region:'west'">
    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
       content1
    </div>
    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
        content2
    </div>
    <div title="Title3" >
       <ul id="tt"></ul>
    </div>
</div>  

</body>
</html>

• 数据库

  

• 后台

package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.google.gson.Gson;

import bean.NodeBean;
import util.DBUtil;

/**
 * Servlet implementation class getDateServlet
 */
@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");

        try {
            Connection conn = DBUtil.getConn();

            QueryRunner queryRunner = new QueryRunner();
            String sql = "select * from dept";
            List<NodeBean> nodeList = queryRunner.query(conn, sql, new BeanListHandler<>(NodeBean.class));

            List<Map<String, Object>> treeList = new ArrayList<Map<String, Object>>();
            Map<String, Map<String, Object>> id_nodeMap = new HashMap<String, Map<String, Object>>();
            for (NodeBean node : nodeList) {
                Map<String, Object> treeNode = new HashMap<String, Object>();
                treeNode.put("id", node.getDept_id());
                treeNode.put("text", node.getDept_name());

                id_nodeMap.put(node.getDept_id(), treeNode);

                if (node.getParent_id().equals("0")) {
                    // 说明是父节点，则直接添加
                    treeList.add(treeNode);
                } else {

                    /**
                     * 如果parendId不为0 说明该节点是某个父父节点的子节点 : 1. 寻找父节点 2.
                     * 在父节点中增加属性children，该属性的值是一个List<Map<String Object>>
                     *
                     */
                    Map<String, Object> parentNode = id_nodeMap.get(node.getParent_id());

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

                        if (parentNode.get("children") == null) {
                            // 说明该父节点当前还没有一个子节点
                            children = new ArrayList<Map<String, Object>>();
                        } else {
                            children = (List<Map<String, Object>>) parentNode.get("children");
                        }
                        children.add(treeNode);
                        parentNode.put("children", children);

                    }

                }

            }

            Gson gson = new Gson();
            String json_data = gson.toJson(treeList);
            PrintWriter out = response.getWriter();

            out.println(json_data);

            out.flush();
            out.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {

    }
}

结果：