index.html 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/easyui.css">

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/icon.css">

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>

<script type="text/javascript">

$('#tabs').tabs({

pill:true

});

if(user==""){

window.location="${pageContext.request.contextPath}/index.jsp";

}

</script>

<title>首页</title>

</head>

<body class="easyui-layout" data-options="fit : true,border : false" >

<div data-options="region:'north'" style="height:80px">

<jsp:include page="top.jsp"></jsp:include>

</div>

<!-- <div data-options="region:'east',split:true" title="East" style="width:100px;"></div> -->

<div data-options="region:'west',split:true" title="权限菜单" style="width:220px;">

<div class="easyui-accordion" style="height:100%;">

</ul>

</div>

</c:if>

</c:forEach>

</div>

</div>

<div data-options="region:'center',split:true" style="padding: 0px;overflow:hidden;">

<div id="tabs" class="easyui-tabs" data-options="fit : true" >

<div title="About" >

系统首页,无法关闭

</div>

</div>

</div>

</body>

</html>

<script type="text/javascript" src="${pageContext.request.contextPath}/js/aup.js"></script>

　

tabs 内嵌页 包含datagrid ; datagrid 外包一定要套一个div 并且设置高度,不然无法显示.

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

	pageEncoding="utf-8"%>

<%@ include file="/include/taglib.jsp"%>

<html>

	<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<title>系统信息列表</title>

    <link rel="stylesheet" type="text/css" href="${ctx}/css/easyui.css">

    <link rel="stylesheet" type="text/css" href="${ctx}/css/icon.css">

	</head>

	<body style="margin: 0px auto;" >

		<div style="height:780px;">

		<table  id="tt"  title="系统列表"></table>

		</div>

	</body>

</html>

　datagrid js 代码

$(function() {

    $('#tt').datagrid({

        url: ctx + '/system/lisSystem.do',

        height:'500px',

        pagination: true,

        /*是否显示下面的分页菜单*/

        border: false,

        fit : true,

        fitColumns:true,//自动使列适应表格宽度以防止出现水平滚动。

        rownumbers: true,

        toolbar: toolbar,

        selectOnCheck: true,

        checkOnSelect: true,

        loadMsg: '数据加载中,请稍候......',

        columns: [[{

            field: 'id',

            title: '系统id',

            checkbox: true,

            width: 220

        },

        {

            field: 'sysName',

            title: '系统名称',

            width: 150

        },

        {

            field: 'sysCode',

            title: '系统编码',

            width: 150,

            align: 'right'

        },

        {

            field: 'status',

            title: '系统状态',

            width: 80,

            align: 'right',

            formatter: function(value, row, index) {

                if (row.status == 0) {

                    return "启用";

                } else if (row.status == 1) {

                    return "禁用";

                } else {

                    return "删除";

                }

            }

        },

        {

            field: 'operate',

            title: '操作',

            width: 150,

            align: 'center',

            formatter: formatOper

        }]]

    });

});

　　

easyUI loyout tabs自适应宽度的更多相关文章

  1. 第二百节，jQuery EasyUI，Tabs(选项卡)组件

    jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...

  2. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  3. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  4. JS实现自适应宽度的Tag切换

    效果体验:http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页. ...

  5. RelativeLayout中的格局，自适应宽度布局

    RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...

  6. Qt的tablewidget行列头自适应宽度

    Qt构造一个TableWidget后,窗口最大化后,列头默认不能自适应宽度,研究了一下,Qt提供了两种方式来处理这个问题,如下:   1. 使用horizontalHeader()->setRe ...

  7. [Winform]DataGridView列自适应宽度

    引言 在做winform项目中,数据控件DataGridView的使用多多少少是会用到的,如果不设置它的属性,默认情况下是不会自适应宽度的,你想查看某项的数据,就不得不将标题栏拖来拖去,挺烦的. 方法 ...

  8. ASP.NET实例——漂亮的自适应宽度的导航条（仿Discuz!）

    PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...

  9. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

随机推荐

  1. Gym100685G Gadget Hackwrench（倍增LCA）

    题目大概说一棵边有方向的树,q个询问,每次询问结点u是否能走到v. 倍增LCA搞即可: 除了par[k][u]表示u结点往上走2k步到达的结点, 再加上upp[k][u]表示u结点往上走2k步经过边的 ...

  2. 【CQgame】[下一百层] [Down]

    简单的下一百层的c++实现,代码一晚上就码完了 注意:游戏前请在 默认值 或 属性 中调整缓冲区大小,否则会输出爆屏,方法写在代码里了 觉得速度 快/慢 的可以在第 23 行手动改一下,相信大神们能看 ...

  3. DOM的概念及子节点类型

    前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...

  4. IO中同步、异步与阻塞、非阻塞的区别

    一.同步与异步同步/异步, 它们是消息的通知机制 1. 概念解释A. 同步所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回. 按照这个定义,其实绝大多数函数都是同步调用(例如si ...

  5. node.js 实现一个简单的登录拦截器

    拦截器在web开发中随处可见,比如站点的管理后台,不说所有人都能进入,所以就需要做一个拦截器并友好的跳转到提示页. 下面我们简单实现一种,判断用户是否登录成功,登录不成功的用户自动重定向到登录页面. ...

  6. Here's what C++ is

    Yes this article describes what c++ exactlyis http://www.skywind.me/blog/archives/1398#comment-3671 ...

  7. Android -- ImageView通过Bitmap得到网上的图片资源

    1. 效果图

  8. C#文字样式

    [字体] 中文名称 英文名称宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体   Microsoft JhengHei新宋体   NSimSun新细明体 PMin ...

  9. 深入浅出 - Android系统移植与平台开发（三）－ 编译并运行Android4.0模拟器

    作者:唐老师,华清远见嵌入式学院讲师. 1.   编译Android模拟器 在Ubuntu下,我们可以在源码里编译出自己的模拟器及SDK等编译工具,当然这个和在windows里下载的看起来没有什么区别 ...

  10. SolrCloud-5.2.1 集群部署及测试

    一. 说明 Solr5内置了Jetty服务,所以不用安装部署到Tomcat了,网上部署Tomcat的资料太泛滥了. 部署前的准备工作: 1. 将各主机IP配置为静态IP(保证各主机可以正常通信,为避免 ...