• 前台
  • <%@ page language="java" contentType="text/html; charset=UTF-8"
    
    pageEncoding="UTF-8"%>
    
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    
<!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>

    <script type="text/javascript">
    
    jQuery(function(){
    
        $('#tt').treegrid({
    
            url:"<%=path%>/servlet/treeGridData",
    
            method: 'post',
    
            lines: true,
    
            rownumbers: true,
    
            //定义关键字段来标识树节点
    
            idField: 'dept_id',
    
            //treeField属性定义哪个字段显示为树形菜单
    
            treeField: 'dept_name',

            columns:[[
    
                {title:'部门名称',field:'dept_name',width:180},
    
                {title:'平均薪水',field:'salary',width:60,align:'right'},
    
                {title:'部门地址',field:'address',width:80}
    
            ]]
    
        });  

        //选项卡
    
        $('#tabs').tabs({
    
            border:false,
    
            tools:[{
    
                iconCls:'icon-add',
    
                handler:function(){
    
                    $('#tabs').tabs('add',{
    
                        title: '插入的选项卡面板',
    
                        selected:false,
    
                        content:"<iframe src='<%=path%>/edit.jsp' border='0' frameborder='0' width='100%'></iframe>",
    
                    });
    
                }
    
            },{
    
                iconCls:'icon-save',
    
                handler:function(){
    
                }
    
            }]

        });  

    });
    
</script>

</head>

<body class="easyui-layout">

<div id="tabs" style="width:500px;height:250px;">
    
    <div title="Tab1" style="padding:20px;">
    
        tab1
    
    </div>
    
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">
    
     <div id="tt" ></div>
    
    </div>
    
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">
    
        tab3
    
    </div>
    
</div>  

</body>
    
</html>
  • edit.jsp
<body class="easyui-layout">

    <form id="form1" name="form1">

        用户id:<input type="text" name="userid" value="${requestScope.userMap.id}"><br>

        用户名:<input type="text"  name="username" value="${requestScope.userMap.userName}"><br>

        密码:<input type="text"  name="password" value="${requestScope.userMap.passWord}">

        </form>

</body>
  • servlet/treeGridData 该路径下的servlet
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");

        response.setCharacterEncoding("UTF-8");

        response.setContentType("text/html");

        PrintWriter out=response.getWriter();

        String treeGrid_json="";

        String sql="";

        Connection conn=null;

        try {

            conn=DBUtil.getConn();

            QueryRunner queryRunner=new QueryRunner();

            sql="select * from dept";

            List<Map<String,Object>> treeGridData=new ArrayList<Map<String,Object>>();

            Map<String,Object> deptMap=null;

            List<Dept> deptList=queryRunner.query(conn,sql,new BeanListHandler<>(Dept.class));

            Map<String,Map<String,Object>> id_map=new HashMap<String,Map<String,Object>>();

            for(Dept dept:deptList){

                deptMap=new HashMap<String,Object>();

                deptMap.put("dept_id", dept.getDept_id());

                deptMap.put("dept_name", dept.getDept_name());

                deptMap.put("salary", dept.getSalary());

                deptMap.put("address", dept.getAddress());

                id_map.put(dept.getDept_id(), deptMap);

                if(dept.getGrade()>2){

                    deptMap.put("state", "closed");

                }

                if(dept.getParent_id().equals("0")){

                    //如果是父节点，则直接添加到treeGridData中

                    treeGridData.add(deptMap);

                }else{

                    //如果是子节点

                    Map<String,Object> parenMap=id_map.get(dept.getParent_id());

                       if (parenMap != null) {

                            List<Map<String, Object>> children = null;

                            if (parenMap.get("children") == null) {

                                // 说明该父节点当前还没有一个子节点

                                children = new ArrayList<Map<String, Object>>();

                            } else {

                                children = (List<Map<String, Object>>) parenMap.get("children");

                            }

                            children.add(deptMap);

                            parenMap.put("children", children);

                        }

                }

            }

            Gson gson=new Gson();

            treeGrid_json=gson.toJson(treeGridData);

            out.println(treeGrid_json);

            out.flush();

            out.close();

        } catch (Exception e) {

            e.printStackTrace();

        }

    }
  • 结果

（九）easyUI之选项卡的更多相关文章

  1. 实现jquery EasyUI tabs选项卡关闭图标后载入自己定义事件

    当关闭tabs选项卡时,底部footer须要通过javascript又一次定位calcFooter(),怎样实现呢?选项卡上的关闭图标的方法是easyui自带的,calcFooter()写在onClo ...

  2. EasyUI - Tabs 选项卡标签

    基本效果: 效果图: html代码: <div id="tab"> <div title="tab1" > <p>tab1& ...

  3. EasyUI创建选项卡并判断是否打开

    //创建选项卡:判断选项卡是否打开,如果以打开则定位到选项卡,否则创建 function addPanel(title) { var bol = $('#main_tabs').tabs('exist ...

  4. JQERY EasyUI Tabs 选项卡 自适应浏览器宽度高度 解决方案

    <script type="text/javascript"> $(window).resize(function () { $('#tt').tabs({ width ...

  5. 7个jquery easy ui 基本组件图解

    以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...

  6. 关于点击ztree的节点将页面生成到easyui的新增选项卡（easyui-tabs）时，总是在浏览器中生成一个新的页面的问题

    最近的项目中用到了easyui,还有ztree菜单.在这里将我遇到的一些问题写出来算是做个笔记吧. 这是我头一次在博客园里分享代码,我的处女作,写的不好的地方还望各位见谅! 由于很久没有写过前台的东西 ...

  7. easyui源码翻译1.32--Tabs（选项卡）

    前言 使用$.fn.tabs.defaults重写默认值对象.下载该插件翻译源码 选项卡显示一批面板.但在同一个时间只会显示一个面板.每个选项卡面板都有头标题和一些小的按钮工具菜单,包括关闭按钮和其他 ...

  8. EasyUI选项卡tab页面处理示例

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  9. 关于easyui框架中a标签使用onclick()触发事件偶尔会选项卡消失BUG解决方案

    今天发现公司的一个easyui项目中有个页面会在触发onclick事件时选项卡消失,如下图 产生BUG后 产生BUG前 查找很多地方还有资料不知道哪里出现的问题,看了下框架源码之类的,因为不是专门的前 ...

随机推荐

  1. oracle查询表指定字段类型

    查询表某字段类型,如下: SELECT data_type FROM all_tab_cols WHERE table_name = UPPER('SRIS_P_BaseInfo') and colu ...

  2. Linux系统下vi编辑器的一些简单使用操作

    Linux系统安装vi编辑器 打开终端,输入: sudo apt install vim 然后输入Y等待安装即可 Linux系统下使用vi编辑器的使用 安装好vim后,终端中输入vim即可进入vim编 ...

  3. Windows使用Latex

    目录 安装Texlive 安装TeXstudio 编写简单的文章 教程 安装Texlive 到清华大学开源软件镜像站下载Texlive2019.iso文件 下载之后,如果有光驱就装载,没有的话就解压. ...

  4. Restful API 架构与设计参考原则

    1. 什么是RESTREST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fielding的博 ...

  5. 转录调控 | Transcriptional Regulation | Regulon

    scRNA-seq做完该做的QC.normalization.imputation.clustering.trajectory和integration,就会开始做转录调控的分析了. 核心就是围绕着TF ...

  6. Chrome和火狐插件让数以百万计用户隐私数据泄露

      https://tech.163.com/19/0721/12/EKK1PRAU00097U7R.html   网易科技讯7月21日消息,据国外媒体报道,流行浏览器诸如广告拦截等扩展功能,已经遭利 ...

  7. pytorch基础学习（一）

    在炼丹师的路上越走越远,开始入手pytorch框架的学习,越炼越熟吧... 1. 张量的创建和操作 创建为初始化矩阵,并初始化 a = torch.empty(, ) #创建一个5*3的未初始化矩阵 ...

  8. 性能监控 | MAT分析内存泄漏

    使用MAT分析内存泄漏(二)八周年重印版 - 知乎 .u-safeAreaInset-top { height: constant(safe-area-inset-top) !important; h ...

  9. P1964 【mc生存】卖东西

    P1964 [mc生存]卖东西 题解 很简单, 暴力 注意一个小点就好 代码 #include<iostream> #include<cstdio> #include<c ...

  10. python 适合的才是最好的

    群里老有人问最新的破解码最新的包,最新的就是最好的吗? 今天说一下这些新手的坑: numpy 最好使用的版本是1.13.3  而非新的1.17.0 pandas最好使用的版本是0.18.0 而非新的0 ...