easyUI loyout tabs自适应宽度

时间：2024-06-09 14:34:38

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

        }]]

    });

});

　　

相关文章