（九）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前查找很多地方还有资料不知道哪里出现的问题,看了下框架源码之类的,因为不是专门的前 ...

随机推荐

LTDC/DMA2D——液晶显示
1.显示器的基本参数 (1) 像素像素是组成图像的最基本单元要素,显示器的像素指它成像最小的点. (2) 分辨率一些嵌入式设备的显示器常常以“行像素值 x列像素值”表示屏幕的分辨率.如分辨率 800x ...
Win+数字快速启动/切换指定程序
Windows键+数字,可以快速启动任务栏上的程序按下按下Win+4桌面将切换到排序第4的程序:页也就是谷歌浏览器. 今天刚发现这个小功能. 文章来源:外星人来地球欢迎关注,有问题一起学习欢迎 ...
使用Flask构建机器学习模型API
1. Python环境设置和Flask基础使用"Anaconda"创建一个虚拟环境.如果你需要在Python中创建你的工作流程,并将依赖项分离出来,或者共享环境设置," ...
Android 使用Intent
使用intent可以吊起其他应用例如发送电子邮件 public void sendEmail(View view){ Intent intent = new Intent(Intent.ACTION ...
QML访问C++类内部
0.前提 C++类需要继承QObject,且有Q_OBJECT宏[所以QT自己的那么多类按道理上QML都是可以直接访问的,nb] 1.QML访问C++中的非private槽函数可直接调用信号也是 ...
pycurl模块
pycurl的使用 pycurl是curl的一个python版本. pycurl的使用说明: pycurl的使用主要是一些参数的设定. 1,c.setopt(pycurl.URL,myurl) 设定链 ...
tensorflow学习从入门到实战(转)
原文作者:zhaozhengcoder链接:https://www.jianshu.com/p/27a2fb320934來源:简书简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处. ...
var和val的区别
var是一个可变变量,这是一个可以通过重新分配来更改为另一个值的变量.这种声明变量的方式和java中声明变量的方式一样. val是一个只读变量,这种声明变量的方式相当于java中的final变量.一个 ...
十六章综合实例——《跟我学Shiro》
目录贴:跟我学Shiro目录贴简单的实体关系图简单数据字典用户(sys_user) 名称类型长度描述 id bigint 编号主键 username varchar 100 用户名 pa ...
OpenCV直方图(直方图、直方图均衡，直方图匹配，原理、实现)
1 直方图灰度级范围为 $[0,L-1]$ 的数字图像的直方图是离散函数 $h(r_k) = n_k$ , 其中 $r_k$ 是第$k$级灰度值,$n_k$ 是图像中灰度为 \( ...

（九）easyUI之选项卡

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

随机推荐

热门专题