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. iris数据集

    iris以鸢尾花的特征作为数据来源,数据集包含150个数据集,分为3类,每类50个数据,每个数据包含4个属性,是在数据挖掘.数据分类中非常常用的测试集.训练集. 链接地址

  2. Codeforces 552C Vanya and Scales(思路)

    题目大概说有101个质量w0.w1.w2.....w100的砝码,和一个质量m的物品,问能否在天平两边放物品和砝码使其平衡. 哎,怎么没想到..注意到w0.w1.w2.....w100—— 把m转化成 ...

  3. SIFT特征提取分析

    SIFT特征提取分析 sift 关键点,关键点检测 读'D. G. Lowe. Distinctive Image Features from Scale-Invariant Keypoints[J] ...

  4. Window.location

    1.location 对象 // 假设当前url是 http://localhost/rpc/plugin.php#hash?a=aaa&b=bbb alert(window.location ...

  5. C#_生成HTML

    #region 生成静态页 /// <summary> /// 生成静态页 /// </summary> /// <param name="URL"& ...

  6. Spring MVC Maven 环境搭建与部署

    本文简单演示了本地开发环境的搭建.项目出包.部署运行.HelloWorld,以及部分注意事项. 起初的玩法:先安装Eclipse,然后分别下载并安装Maven.spring的插件,再进行工程模式转换, ...

  7. asp.net分页方法

    /// </summary> /// <param name="ds">DataSet实例</param> /// <param name ...

  8. 简单实现异步编程promise模式

    本篇文章主要介绍了异步编程promise模式的简单实现,并对每一步进行了分析,需要的朋友可以参考下 异步编程 javascript异步编程, web2.0时代比较热门的编程方式,我们平时码的时候也或多 ...

  9. oracle中number类型的数据使用as string 得到的值为null

    1,如果数据的运行时类型(和数据库字段类型相同)不是字符串类型,比如number/date等,将ds.Tables[0].Rows[i][j] 调用 as string 时,不管 这个字段是否有值,这 ...

  10. Set

    package lis0924; //生成器导包 import java.util.HashSet; import java.util.Iterator; import java.util.Set; ...