(九)easyUI之选项卡
- 前台
<%@ 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之选项卡的更多相关文章
- 实现jquery EasyUI tabs选项卡关闭图标后载入自己定义事件
当关闭tabs选项卡时,底部footer须要通过javascript又一次定位calcFooter(),怎样实现呢?选项卡上的关闭图标的方法是easyui自带的,calcFooter()写在onClo ...
- EasyUI - Tabs 选项卡标签
基本效果: 效果图: html代码: <div id="tab"> <div title="tab1" > <p>tab1& ...
- EasyUI创建选项卡并判断是否打开
//创建选项卡:判断选项卡是否打开,如果以打开则定位到选项卡,否则创建 function addPanel(title) { var bol = $('#main_tabs').tabs('exist ...
- JQERY EasyUI Tabs 选项卡 自适应浏览器宽度高度 解决方案
<script type="text/javascript"> $(window).resize(function () { $('#tt').tabs({ width ...
- 7个jquery easy ui 基本组件图解
以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...
- 关于点击ztree的节点将页面生成到easyui的新增选项卡(easyui-tabs)时,总是在浏览器中生成一个新的页面的问题
最近的项目中用到了easyui,还有ztree菜单.在这里将我遇到的一些问题写出来算是做个笔记吧. 这是我头一次在博客园里分享代码,我的处女作,写的不好的地方还望各位见谅! 由于很久没有写过前台的东西 ...
- easyui源码翻译1.32--Tabs(选项卡)
前言 使用$.fn.tabs.defaults重写默认值对象.下载该插件翻译源码 选项卡显示一批面板.但在同一个时间只会显示一个面板.每个选项卡面板都有头标题和一些小的按钮工具菜单,包括关闭按钮和其他 ...
- EasyUI选项卡tab页面处理示例
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 关于easyui框架中a标签使用onclick()触发事件偶尔会选项卡消失BUG解决方案
今天发现公司的一个easyui项目中有个页面会在触发onclick事件时选项卡消失,如下图 产生BUG后 产生BUG前 查找很多地方还有资料不知道哪里出现的问题,看了下框架源码之类的,因为不是专门的前 ...
随机推荐
- 配置 Ubuntu 服务器
Python: apt install python3-pip sudo add-apt-repository ppa:fkrull/deadsnakes sudo apt-get update ap ...
- Tosca TestCases: Update all,Checkin all,Checkout,Checkout Tree
#记录一下TestCases Module 红框里面这几个button的功能 #Update all 从数据库里把别人最新checkin的东西给拽出来查看,也就是拿最新版本 #Checkin all ...
- vue + elementui form resetFields方法 无法重置表单
this.$refs['form'].resetFields(); 方法无法重置.1 el-form 组件 没有添加 ref 属性 <el-form ref="form" : ...
- C# 读取文件内容
读取文件内容有三种方式 全部读取到字符串变量中 一次读取一行 全部读取到字符串数组中,每个数组元素存储一行文本 全部读取到字符串变量 string text = System.IO.File.Read ...
- redis未设置idle超时时间导致连接过多
今天ELK收集日志的时候,发现收集失败,查找各方面原因,最后在redis日志里面发现报错:[2489] 02 Jun 10:43:42 # Error allocating resoures for ...
- php利用文件进行排他型锁定,防止并发
<?php $fp = fopen('/tmp/file.lock', "a+"); if(flock($fp, LOCK_EX)) { //进行排他型锁定 fwrite($ ...
- Linux - 对比net-tools与iproute2
简介 net-tools包含ifconfig.route.arp和netstat等命令行工具,用于管理和排查各种网络配置. 起源于BSD TCP/IP工具箱,旨在配置老式Linux内核的网络功能. 自 ...
- 基于Visual Studio Code搭建Vue开发环境
安装node.js最新版 这里安装的是8.11.4版 image.png 更新npm至最新版 安装node.js后, npm默认版本为: 6.1.0 image.png 使用npm insta ...
- 如何区分浏览器发起的是基于http/1.x还是http/2的请求?
前言 随着2015年http2.0被推出以来,主流的现代浏览器大多都开始慢慢去实现这个协议,那么如果查看自己的浏览器是否支持发送http2.0的请求,或者如何查看浏览器发送的请求是基于哪一个 ...
- spacemacs:emacs和vim结合,大杀器。vim党转emacs
结合本人基础,做下述结论.不一定准确. 基础: 1. vim操作和高级操作,熟悉.使用的spf13-vim. 2. emacs以前学过,但是按键太累,相比vim简直难受. 3. emacs命令 ...