（七）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) { } }
结果：
