• 前台
  • <%@ 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. Selenium: 利用select模块操作下拉框

    在利用selenium进行UI自动化测试过程中,经常会遇到下拉框选项,这篇博客,就介绍下如何利用selenium的Select模块来对标准select下拉框进行操作... 首先导入Select模块: ...

  2. Java 中清空map

    本文链接:https://blog.csdn.net/TsuiXh/article/details/87879004在开发中在使用Map时,如果需要将Map作为临时的数据存储和处理,可以不用每次都去新 ...

  3. P5662 纪念品

    P5662 纪念品 题解 拿到题目想到DP,但是就是不知道咋写 后来证实这是个背包DP(最近整理背包白整了 我们观察这道题目的特殊之处: 也就是说,对于手中的物品,我们可以今天买了然后明天早上接着卖出 ...

  4. <JavaScript>几道javascript练习题

    问题1: 作用域(Scope) 考虑以下代码: (function() { var a = b = 5; })(); console.log(b); 控制台(console)会打印出什么? 答案 上述 ...

  5. latex运算符

    一些小的运算符,可以在数学模式下直接输入,但是有一些运算符需要用控制序列生成:

  6. SQL-W3School-函数:SQL SUM() 函数

    ylbtech-SQL-W3School-函数:SQL SUM() 函数 1.返回顶部 1. SUM() 函数 SUM 函数返回数值列的总数(总额). SQL SUM() 语法 SELECT SUM( ...

  7. (一)深入java虚拟机之内存溢出与分析

    一.内存溢出程序 public class Test { public static void main(String[] args) { List<User> userList=new ...

  8. 【Leetcode_easy】1108. Defanging an IP Address

    problem 1108. Defanging an IP Address solution: class Solution { public: string defangIPaddr(string ...

  9. gocheck框架

    1.  引用包 :  gocheck "gopkg.in/check.v1" 2. 自动化测试入口   :Test_run(t *testing.T) 3. 将自定义的测试用例集, ...

  10. .Net Core 常用开发工具

    组件名 描述 可选版本 推荐版本 Visual Studio Community 社区免费版 For Visual Studio 2017 For Visual Studio 2019 Visual ...