一、普通的静态面板

  • 前台
<%@ 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) {

    }

}

结果：

（七）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. pl/sql test Window 参数为date

    好久没写笔记了,感觉颓废了,原因是工作忙,休息时间人也变懒了,好了不说了:今天需要记录一下plsql打开测试窗口测试存储过程时,入参为date格式时报的异常 本以为和sql一样处理就可以,但是报异常, ...

  2. MediaPlayer: MediaPlayer中的prepare方法和prepareAsync方法的区别

    prepare方法是将资源同步缓存到内存中,一般加载本地较小的资源可以用这个,如果是较大的资源或者网络资源建议使用prepareAsync方法,异步加载.但如果想让资源启动,即start()起来,因为 ...

  3. Bitmap之getPixel和setPixel函数

    package com.loaderman.customviewdemo; import android.app.Activity; import android.graphics.Bitmap; i ...

  4. 在Linux下使用LLVM Clang以及Blocks

    可以从这个链接下载:http://llvm.org/releases/download.html sudo apt-get install llvm sudo apt-get install clan ...

  5. mysqlcheck修复工具

    mysqlcheck工具可以检查.修复.优化和分析MyISAM引擎的表,实际上是集成了Mysql中的check.repair.analyze.tmpimize的功能. mysqlcheck共军存在于m ...

  6. PAT 甲级 1052 Linked List Sorting (25 分)（数组模拟链表，没注意到不一定所有节点都在链表里）

    1052 Linked List Sorting (25 分)   A linked list consists of a series of structures, which are not ne ...

  7. asp.net core swagger使用及注意事项

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.是一款RESTFUL接口的文档在线自动生成+功能测试软件.主要目的是构建标准的.稳定的.可重 ...

  8. rhel7免密登录问题

    以前在做linux免密登录时只要执行:cat id_rsa.pub>> authorized_keys,就可以了 后来升级到rhel7之后不行,发现有两个需要改动: 1.修改ssh的配置文 ...

  9. Zabbix设置触发器调用远程主机脚本实现触发告警后自动启动自愈功能

    参考:https://www.cnblogs.com/xiami-xm/p/8929163.html 当zabbix添加触发器后触发告警后可以设置发送邮件及短信告警,但是恢复故障需要运维人员收到告警以 ...

  10. Scapy 从入门到放弃

    0x00 前言 最近闲的没事,抽空了解下地表最强的嗅探和收发包的工具:scapy.scapy是一个python模块,使用简单,并且能灵活地构造各种数据包,是进行网络安全审计的好帮手. 0x01 安装 ...