easyUI loyout tabs自适应宽度

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
        }]]
    });
});

  

时间: 2024-10-10 10:18:55

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

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

如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就会自适应了,下面是一个实时的demo: left  middle  right  但是table布局是不推荐的,table布局是css流行之前使用的布局,有很多缺点:当table加载完之前,整个table的都是空白的,table将数据和排版参和在一起,使得页面混乱,并且table布局修改排版十分麻烦

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

UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效果如图2: 这样子UEditor百度富文本编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给initialFrameWidth属性. 这样子确实是可以在第一次加载的时候适应屏幕宽度,但是却似乎宽度稍微过了一点点,超过上面的灰条了.而且这里还有一个问题: 当你改变浏览器大小时,会有个很严重的排版BUG

解决Button在IE6、7下的自适应宽度问题

很早就遇到过这么个小问题,但由于其并未影响到实际作用和美观就没有正面解决它,现在,我们来试着解决它. 写一个Button,有两种方式:其一,直接button标签:其二,input type=”button”. 不管哪种方式,Button的宽度在IE6.7下总是不能完美,接下来我们演示一个普通的Button,你可以用IE6或者IE7浏览器看看其显示宽度,然后对比Chrome或者IE8等浏览器,你会发现Bug的所在. 1.一个普通的Button: 可以很直接的看到Button的两边有空隙,当然,这个

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

转自http://www.cnblogs.com/VAllen/p/UEditor-InitialFrameWidth-Auto.html UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效果如图2: 这样子UEditor百度富文本编辑器会在第一次加载的时候获取屏幕宽度,然后赋值给initialFrameWidth属性. 这样子确实是可以在第一次加

DIV+CSS实现两边固定宽度,中间自适应宽度

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DIV+CSS实现两边固定宽度,中间自适应宽度</title> <style type="text/css"> .left, .right{ width: 100px; height: 100px; background-colo

RelativeLayout中的格局,自适应宽度布局

RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:background="#ff0000ff" android:id="@+id/tvwAtLeft"android:layout_height="wrap_content" android:layout_width="wrap_content"

CSS布局——左定宽度右自适应宽度并且等高布局

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受.那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧: 左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布局,

解决左边固定右边自适应宽度的方案

上一篇文章中有提及过很多web前端开发者用float+margin+position:absolute来实现表单内容的左边文字固定右边的输入框自适应宽度的问题,当然,这个问题我也在百度中搜索过,基本搜索出来的答案都是这样描述的,我也在上一篇文章中提出过浮动和绝对定位属于脱离文档流布局,是会损耗性能的,但是百度中却没有给出我所想表达出的解决方案,所以不得不在此将该方案具体的描述清楚. 首先,我需要介绍的是display:box这个属性,它是今天弹性布局的主角,虽然它有个更加强大的弟弟display

css实现左边div自适应宽度,右边宽度适应左边

利用bfc:右边盒子触发bfc,使其不与浮动盒子区域重叠,因此会重新计算宽度. 1 <style> 2 .box{ width: 900px; margin: 0 auto; background-color: #eee; } 3 .left{ min-width: 200px; float: left; background-color: yellow; height: 60px;} 4 .bfc { background-color: green; } 5 .right{ display: