1
저는 Spring Boot와 함께 프로젝트를 가지고 있으며, 템플릿을 위해 Thymeleaf와 Bootstrap을 사용하고 있습니다. DataTable에 작업 열이 있고 작업 중 하나가 사용자에게 직원을 삭제할 수있는 가능성을 부여합니다. 사용자에게 그가 직원을 삭제하기를 원한다고 확신하는지 묻는 모달을 추가하고 싶습니다. 다음은 HTML입니다.Thymeleaf는 부트 스트랩 모달을 보여주지 않을 것입니다.
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout">
<head>
<title>Empleados</title>
<style media="all" type="text/css">
.alignCenter { text-align: center; }
.highlight-green{
font-weight: bold;
color: green;
}
.highlight-red{
font-weight: bold;
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://127.0.0.1:8080/satERP/bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$("#list-personas").DataTable({
"columnDefs": [ {
"targets": 0,
"createdCell": function (td, cellData, rowData, row, col) {
if (cellData == "OK") {
$(td).addClass('highlight-green');
}
if (cellData == "Documentos Pendientes") {
$(td).addClass('highlight-red');
}
}
} ],
"aoColumns": [
{ bSortable: true, sClass: "alignCenter" },
{ bSortable: true, sClass: "alignCenter" },
{ bSortable: true, sClass: "alignCenter" },
{ bSortable: true, sClass: "alignCenter" },
{ bSortable: true, sClass: "alignCenter" },
{ bSortable: false, sClass: "alignCenter"}
],
"language": {
"decimal": "",
"info": "Mostrando _START_ a _END_ de _TOTAL_ Empleados",
"infoEmpty": "Mostrando 0 a 0 de 0 Empleados",
"infoFiltered": "(filtrando de los _MAX_ Empleados registrados)",
"emptyTable": "No hay Empleados registrados",
"lengthMenu": "Mostrar _MENU_ entradas",
"loadingRecords": "Cargando...",
"processing": "Procesando...",
"search": "Buscar:",
"zeroRecords": "No se encontraron registros asociados a la búsqueda",
"paginate": {
"first": "Primera",
"last": "Última",
"next": "Siguiente",
"previous": "Anterior"
}
}
});
$(window).load(function(){
$('#myModal').modal('show');
});
});
</script>
</head>
<body>
<div layout:fragment="header">
<h1>Empleados</h1>
<div th:if="${msg!=null}" class="alert alert-success" role="alert" style="margin-bottom: 0px; margin-top: 6px;">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong th:text="${msg}"></strong>
</div>
</div>
<div layout:fragment="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Empleados Registrados</h3>
</div><!-- /.box-header -->
<div class="box-body">
<table id="list-personas" class="table table-bordered table-striped">
<thead>
<tr>
<th>Status</th>
<th>Identificación</th>
<th>Nombre</th>
<th>Departamento</th>
<th>Perfil</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr th:each="persona : ${personas}">
<td th:text="${persona.status.status}"/>
<td th:text="${persona.identificacion}"/>
<td th:text="${persona.nombre}"/>
<td th:text="${persona.departamento.dpto}"/>
<td th:text="${persona.perfil.perfil}"/>
<td>
<a th:href="@{'/persona/' + ${persona.id_persona}}" title="Consultar Empleado">
<i class="fa fa-info"></i>
</a>
<a th:href="@{'/persona/' + ${persona.id_persona} + '/update'}" title="Actualizar Empleado">
<i class="fa fa-pencil-square-o" style="color:green;"></i>
</a>
<a href="#" data-toggle="modal" data-target="#myModal" title="Eliminar Empleado">
<i class="fa fa-times" style="color:red;"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</div>
<div class="modal modal-danger fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" style="width: 350px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><i class="fa fa-users"></i>Eliminar Empleado</h4>
</div>
<div class="modal-body">
<div class="box-body table-responsive">
<div class="box-body">
<div class="row">
<div class="col-xs-12">
<p>¿Está seguro que desea eliminar al empleado?</p>
</div>
</div>
</div>
</div>
</div><!-- /.modal-body -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
<button id="btn-delete" type="button" class="btn btn-primary"><i class="fa fa-check"></i> Yes</button>
</div>
</div>
</div>
</div>
</body>
</html>
나는 거의 모든 것을 시도했으며 모달을 보여줄 수 없습니다. 링크를 클릭 할 때마다 아무 것도하지 않습니다. 아무도 무슨 일이 일어 났는지 압니까? 미리 감사드립니다.
혹시 이것에 대한 답을 찾으셨습니까? 비슷한 문제가 있습니다. – Tamb