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