一、普通的静态面板

  • 前台
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.     pageEncoding="UTF-8"%>
  3. <!DOCTYPE html >
  4. <html>
  5. <%
  6.     String path = request.getContextPath();
  7. %>
  8. <head>
  9. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  10. <title>Insert title here</title>
  11. <link rel="stylesheet" type="text/css"
  12.     href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">
  13. <link rel="stylesheet" type="text/css"
  14.     href="<%=path%>/script/easyUI-1.4/themes/icon.css">
  15. <script type="text/javascript"
  16.     src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>
  17. <script type="text/javascript"
  18.     src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>
  19. <script type="text/javascript"
  20.     src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>
  21. </head>
  22.  
  23. <script type="text/javascript">
  24.  
  25. jQuery(function(){
  26.  
  27.     $('#tt').tree({
  28.         url:'<%=path%>/servlet/getData',
  29.         method:'POST',
  30.         animate:true
  31.     });  
  32.  
  33. });
  34. </script>
  35.  
  36. <body class="easyui-layout">
  37.  
  38.     <h2>1.普通的折叠面板</h2>
  39.        <div id="aa" class="easyui-accordion" style="width:300px;height:200px;" data-options="region:'west'">
  40.     <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
  41.        content1
  42.     </div>
  43.     <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
  44.         content2
  45.     </div>
  46.     <div title="Title3" >
  47.        <ul id="tt"></ul>
  48.     </div>
  49. </div>  
  50.  
  51. </body>
  52. </html>
  • 数据库

  • 后台
  1. package servlet;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5. import java.sql.Connection;
  6. import java.util.ArrayList;
  7. import java.util.HashMap;
  8. import java.util.List;
  9. import java.util.Map;
  10.  
  11. import javax.servlet.ServletException;
  12. import javax.servlet.annotation.WebServlet;
  13. import javax.servlet.http.HttpServlet;
  14. import javax.servlet.http.HttpServletRequest;
  15. import javax.servlet.http.HttpServletResponse;
  16.  
  17. import org.apache.commons.dbutils.QueryRunner;
  18. import org.apache.commons.dbutils.handlers.BeanListHandler;
  19.  
  20. import com.google.gson.Gson;
  21.  
  22. import bean.NodeBean;
  23. import util.DBUtil;
  24.  
  25. /**
  26.  * Servlet implementation class getDateServlet
  27.  */
  28. @WebServlet("/servlet/getData")
  29. public class GetDataServlet extends HttpServlet {
  30.     private static final long serialVersionUID = 1L;
  31.  
  32.     /**
  33.      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
  34.      *      response)
  35.      */
  36.     protected void doGet(HttpServletRequest request, HttpServletResponse response)
  37.             throws ServletException, IOException {
  38.         this.doPost(request, response);
  39.     }
  40.  
  41.     /**
  42.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
  43.      *      response)
  44.      */
  45.     protected void doPost(HttpServletRequest request, HttpServletResponse response)
  46.             throws ServletException, IOException {
  47.         request.setCharacterEncoding("UTF-8");
  48.         response.setCharacterEncoding("UTF-8");
  49.         response.setContentType("text/html");
  50.  
  51.         try {
  52.             Connection conn = DBUtil.getConn();
  53.  
  54.             QueryRunner queryRunner = new QueryRunner();
  55.             String sql = "select * from dept";
  56.             List<NodeBean> nodeList = queryRunner.query(conn, sql, new BeanListHandler<>(NodeBean.class));
  57.  
  58.             List<Map<String, Object>> treeList = new ArrayList<Map<String, Object>>();
  59.             Map<String, Map<String, Object>> id_nodeMap = new HashMap<String, Map<String, Object>>();
  60.             for (NodeBean node : nodeList) {
  61.                 Map<String, Object> treeNode = new HashMap<String, Object>();
  62.                 treeNode.put("id", node.getDept_id());
  63.                 treeNode.put("text", node.getDept_name());
  64.  
  65.                 id_nodeMap.put(node.getDept_id(), treeNode);
  66.  
  67.                 if (node.getParent_id().equals("0")) {
  68.                     // 说明是父节点，则直接添加
  69.                     treeList.add(treeNode);
  70.                 } else {
  71.  
  72.                     /**
  73.                      * 如果parendId不为0 说明该节点是某个父父节点的子节点 : 1. 寻找父节点 2.
  74.                      * 在父节点中增加属性children，该属性的值是一个List<Map<String Object>>
  75.                      *
  76.                      */
  77.                     Map<String, Object> parentNode = id_nodeMap.get(node.getParent_id());
  78.  
  79.                     if (parentNode != null) {
  80.                         List<Map<String, Object>> children = null;
  81.  
  82.                         if (parentNode.get("children") == null) {
  83.                             // 说明该父节点当前还没有一个子节点
  84.                             children = new ArrayList<Map<String, Object>>();
  85.                         } else {
  86.                             children = (List<Map<String, Object>>) parentNode.get("children");
  87.                         }
  88.                         children.add(treeNode);
  89.                         parentNode.put("children", children);
  90.  
  91.                     }
  92.  
  93.                 }
  94.  
  95.             }
  96.  
  97.             Gson gson = new Gson();
  98.             String json_data = gson.toJson(treeList);
  99.             PrintWriter out = response.getWriter();
  100.  
  101.             out.println(json_data);
  102.  
  103.             out.flush();
  104.             out.close();
  105.         } catch (Exception e) {
  106.             e.printStackTrace();
  107.         }
  108.     }
  109.  
  110.     public static void main(String[] args) {
  111.  
  112.     }
  113. }

结果：

（七）easyUI之Accordion折叠面板：普通的静态面板的更多相关文章

  1. （八）easyUI之Accordion折叠面板：动态面板

    二.动态面板 数据库设计 函数设计:该函数用于获取某个节点的所有子节点 CREATE FUNCTION fn_getAddress_ChildList_test(rootId INT) RETURNS ...

  2. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  3. 第二百零一节，jQuery EasyUI，Accordion(分类)组件

    jQuery EasyUI,Accordion(分类)组件 学习要点: 1.加载方式 2.容器属性 3.事件列表 4.方法列表 5.面板属性 本节课重点了解 EasyUI 中 Accordion(选项 ...

  4. 出售Illustrator脚本插件面板（包含面板源码，以及面板上所有的功能源码）

    出售Illustrator脚本插件面板(包含面板源码,以及面板上所有的功能源码) 购买后可提供相应的小修改,以及教你使用往这个多列面里再加上按钮功能! 这套源码可作为工作使用,也可用为新手学习AI脚面 ...

  5. 关于液晶显示器的6bit面板、8bit面板及E-IPS（转）

    原文:http://bbs.3dmgame.com/thread-2232447-1-1.html              1.什么是6bit面板.8bit面板         众所周知,液晶显示器 ...

  6. Jquery Accordion 折叠面板

    属性 类型 默认值 active Boolean/Number/jQuery/Selector/Element 第一个面板 设定默认显示的面板.设置为 false 时默认不显示面板,需 collaps ...

  7. easyUI之Accordion（分类）

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  8. JGUI源码：Accordion折叠到侧边栏实现(6)

    折叠和非折叠效果如左右图所示 代码如下 //折叠 $.fn.jAccordionfold = function() { return this.each(function() { var obj = ...

  9. Easyui之accordion修改Title样式，字体等

    .accordion{background:#fff;overflow:hidden;}.accordion .accordion-header{background:#efefef;border-t ...

随机推荐

  1. git notes的用法

    1. notes翻译为中文评注 2. notes出现的作用 避免某一次commit的内容修改导致当前以及随后的commit发生变化,相当于在当前的commit后面追加一些信息,如: 某次commit的 ...

  2. angular组件数据

    import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-news', templateUrl: ' ...

  3. UI——DOM

    原文链接:Introduction to the DOM Introduction The Document Object Model, usually referred to as the DOM, ...

  4. HttpClient结合PostMethod调用接口

    HttpClient结合PostMethod调用接口   解决方法: HttpClient client = new HttpClient(); PostMethod post = new PostM ...

  5. Docker 部署 ELK 收集 Nginx 日志

    一.简介 1.核心组成 ELK由Elasticsearch.Logstash和Kibana三部分组件组成: Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引 ...

  6. 123457123456#0#-----com.twoapp.KidsShiZi01--前拼后广--儿童宝宝识字jiemei

    com.twoapp.KidsShiZi01--前拼后广--儿童宝宝识字jiemei

  7. Web登录验证之 Shiro

    1.需要用到的shiro相关包 <!-- shiro begin --> <dependency> <groupId>org.apache.shiro</gr ...

  8. PAT 甲级 1032 Sharing (25 分)(结构体模拟链表,结构体的赋值是深拷贝)

    1032 Sharing (25 分)   To store English words, one method is to use linked lists and store a word let ...

  9. Microsoft Visual Studio(VS)启动报安装过程中无法运行

    开机启动VS提示无法运行,很可能VS正在更新,可以等待几分钟更新完成,再次运行VS. 也可以把更新进程结束,进程名:VSIXAutoUpdate.exe

  10. checkbox 在移动端显示为小圆圈问题

    在desktop显示正常,但是在移动端显示变为小圆圈,无法正确展示选中取消选中效果问题解决方案: display: block; width: 58px; height: 20px; -webkit- ...