一、普通的静态面板

  • 前台
<%@ 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. markdown文件的基本常用编写语法

    .md即markdown文件 1.标题的几种写法: 第一种:     前面带#号,后面带文字,分别表示h1-h6,上图可以看出,只到h6,而且h1下面会有一条横线,注意,#号后面有空格 第二种:   ...

  2. postgresql 的 .pgpass密码文件的使用

    pgpass 是 连接 postgresql 时使用的密码文件,通常位置为 ~/.pgpass.在使用某些组件时还真的必须使用.具体的格式为: hostname:port:database:usern ...

  3. Qt之模型/视图（实时更新数据）

    上两节简单介绍了Qt中对于模型/视图的编程,大部分助手里说的很清楚了,现在就开始实战部分吧! 在实际应用中,视图展示的数据往往并非一成不变的,那么如何实时更新成了一个很重要的问题!功能:(1)添加委托 ...

  4. DELPHI搭建centos开发环境

    DELPHI搭建centos7开发环境 关闭防火墙 搭建开发环境,还是直接关闭LINUX防火墙,省事. 否则,使用到的网络端口号,都要在防火墙开放,麻烦. systemctl disable fire ...

  5. vue 引入公共css文件

    1.在入口js文件main.js中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue'import App from './App' // 引入App这个组件impo ...

  6. [Java复习] 分布式PRC - Dubbo

    分布式RPC框架 dubbo常见问题: 1. 问dubbo的工作原理:服务注册,注册中心,服务生产者,消费者,代理通信,负载均衡 2. 问网络通信,序列化: dubbo协议,长连接,NIO,hessi ...

  7. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_13-课程预览功能开发-CMS页面预览接口测试

    5.2 CMS页面预览测试 CMS已经提供了页面预览功能,课程预览功能要使用CMS页面预览接口实现,下边通过cms页面预览接口测试课 程预览的效果. 1.向cms_page表插入一条页面记录或者从cm ...

  8. 解决jdk卸载出错2502、2503

    之前装的jdk1.6,后来软件要求用1.8,就卸载了1.6,卸载的时候出现了这个问题.后来又有其他软件用1.8出错,就又要装1.6,脑壳疼.网上建议先卸载1.8再装低版本,结果卸载1.8,又出现错误2 ...

  9. 【miscellaneous】GStreamer下的音视频播放

    Gst-launch命令: gst-launch filesrc location=*.* ! demux name=demux demux.video_00 ! queue ! decoder ! ...

  10. JPEG2000开发SDK及其特点

    JPEG2000开发SDK及其特点 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:JPEG2000被开发来取代JPEG,但因为大量核心算法被专利注册, ...