当前位置：首页 > news >正文

easyUI loyout tabs自适应宽度

news 来源：原创 2024/5/9 20:32:18

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

转载于:https://www.cnblogs.com/zuolun2017/p/5777709.html