如何使用 servlet 制作整洁的 jtable？
Posted
技术标签:
【中文标题】如何使用 servlet 制作整洁的 jtable？【英文标题】：How can I make a neat jtable using servlet? 【发布时间】：2018-04-09 10:43:54 【问题描述】：如何调整 jTable heather 的大小以适应 servlet-JSP 中的单元格数据。请检查此image。
Java 中的代码是：
public class DaoEmpleado
private Connection conexionBd;
private PreparedStatement pStmt;
public DaoEmpleado() throws ClassNotFoundException, SQLException
conexionBd = OracleUtileriasConexion.getOracleConnection();
public List<Empleado> obtenerTodosLosEmpleados(int inicioPaginaIndice, int registrosEnPagina)
List<Empleado> empleados = new ArrayList<Empleado>();
String consulta = "SELECT * from (Select M.*, Rownum R From TABLA_EMPLEADO M) where r > " + inicioPaginaIndice +" and r <= "+registrosEnPagina;
System.out.println(consulta);
System.out.println("ñañañaña " );
try
Statement stmt = conexionBd.createStatement();
ResultSet rs = stmt.executeQuery(consulta);
while (rs.next())
System.out.println("estoy entrando " );
Empleado empleado = new Empleado();
empleado.setID_EMPLEADO(rs.getInt("ID_EMPLEADO"));
empleado.setAPELLIDO_MATERNO(rs.getString("APELLIDO_MATERNO"));
empleado.setAPELLIDO_PATERNO(rs.getString("APELLIDO_PATERNO"));
empleado.setNOMBRE(rs.getString("NOMBRE"));
empleado.setID_PUESTO_EMPLEADO(rs.getInt("ID_PUESTO_EMPLEADO"));
empleado.setDIRECCION(rs.getString("DIRECCION"));
empleado.setCOLONIA(rs.getString("COLONIA"));
empleado.setCP(rs.getString("CP"));
empleado.setPAIS(rs.getString("PAIS"));
empleado.setESTADO(rs.getString("ESTADO"));
empleado.setCIUDAD(rs.getString("CIUDAD"));
empleado.setCELULAR(rs.getString("CELULAR"));
empleado.setNO_SEGURO_SOCIAL(rs.getString("NO_SEGURO_SOCIAL"));
empleado.setNSS_ARCHIVO(rs.getString("NSS_ARCHIVO"));
empleado.setRFC(rs.getString("RFC"));
empleados.add(empleado);
catch (SQLException e)
System.err.println(e.getMessage());
return empleados;
以及JSP中的代码：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib prefix ="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var = "contextRoot" value = "$pageContext.request.contextPath"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Catálog de empleados</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Include one of jTable styles. -->
<link href="tabla/css/metro/blue/jtable.css" rel="stylesheet" type="text/css" />
<link href="tabla/css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap Core CSS -->
<link href="$pageContext.request.contextPath/assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="$pageContext.request.contextPath/assets/css/formato.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Include jTable script file. -->
<script src="tabla/js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="tabla/js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="tabla/js/jquery.jtable.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
$('#tabla_emp').jtable(
title : 'Registros encontrados',
paging: true, //Enable paging
pageSize: 10, //Set page size (default: 10)
actions:
listAction: 'ControladorEmpleado?accion=lista',
,
fields :
ID_EMPLEADO :
title : 'Id',
sort :true,
width : '4%',
key : true,
list : true,
create : false
,
APELLIDO_PATERNO :
title : 'Ap. paterno',
width : '4%',
,
APELLIDO_MATERNO :
title : 'Ap. materno',
width : '4%',
,
NOMBRE :
title : 'Nombre',
width : '4%',
,
ID_PUESTO_EMPLEADO :
title : 'Id pto emp',
width : '4%',
,
DIRECCION :
title : 'Direccion',
width : '4%',
,
COLONIA :
title : 'Col.',
width : '4%',
,
CP :
title : 'CP',
width : '4%',
,
PAIS :
title : 'Pais',
width : '4%',
,
ESTADO :
title : 'Edo',
width : '4%',
,
CIUDAD :
title : 'Cd',
width : '4%',
,
CELULAR :
title : 'Cel',
width : '4%',
,
TELEFONO :
title : 'Tel',
width : '4%',
,
CORREO_ELECTRONICO:
title : 'Correo',
width : '4%',
,
CONTACTO_EMERGENCIA :
title : 'Contacto emerg',
width : '4%',
,
NO_SEGURO_SOCIAL :
title : 'no SS',
width : '4%',
,
NSS_ARCHIVO :
title : 'nss archivo',
width : '4%',
,
NO_LICENCIA_ARCHIVO :
title : 'no licencia archivo',
width : '4%',
,
RFC:
title : 'rfc',
width : '4%',
,
FECHA_VENCIMIENTO_LICENCIA:
title : 'fecha vencimiento licencia',
width : '4%',
,
FECHA_CONTRATACION:
title : 'fecha contratacion',
width : '4%',
,
EMP_USU_ULT_MOD :
title : 'Usu ult mod',
width : '4%',
create: false
,
EMP_FEC_ULT_MOD :
title : 'Ult mod',
width : '4%',
create: false
);
$('#tabla_emp').jtable('load');
);
</script>
<style type="text/css">
.lb-sm
font-size: 12px;
.lb-md
font-size: 16px;
.lb-lg
font-size: 20px;
</style>
</head>
<body>
<jsp:include page="../GENERAL/_header.jsp"></jsp:include>
<div class="container">
<h2><span class="label label-primary">Puestos de Empleados</span></h2>
</div>
<div
style="width: 80%; margin-right: 10%; margin-left: 10%; text-align: left;">
<h4></h4>
<br></br>
<div id="tabla_emp"></div>
</div>
<jsp:include page="../GENERAL/_footer.jsp"></jsp:include>
</body>
<script type="text/javascript">
window.onload=function ()
$('#Administracion').addClass('active');
;
</script>
</html>如果有人知道如何在所有列和标题适合的情况下制作整洁且可接受的数据，请告诉我。
【问题讨论】：
检查此link。您必须在该表中添加水平滚动条。 非常感谢 :) 【参考方案1】：根据上面的 cmets，您当然可以让 jTable 容器 div 可滚动。
另一个技术选项是使用column visibility features in jTable 默认只显示基本数据，并让用户根据需要选择额外的列。
电子邮件地址等其他字段总是很宽，因此您希望将地址替换为 mailto 链接，这将启动用户电子邮件应用程序以发送电子邮件。
看着图像，我无法说出太多关于数据的信息。我确实看到你有两个电话号码。您可以在记录中保留这两个数字，并在 jTable 定义中有两列，但您可以将其中一个从表中排除，并在一个 td 中垂直显示这两个值。
telephone:
title: 'Phone',
display: function(data)
var str = "T: "+ data.record.telephone + "<br />"
+ "C: "+ data.record.cellphone;
return str;
,
cellphone:
list: false
这将在另一列下显示一个，并保存一列。此策略对于完整的邮政地址非常有效。
最后的建议是始终考虑用户必须看到什么，以及他们可能需要从一行数据中看到什么。您可能会发现某些数据可以降级到子表中，并且只能按需显示。
【讨论】：
以上是关于如何使用 servlet 制作整洁的 jtable？的主要内容，如果未能解决你的问题，请参考以下文章