Question

我有一个Spring Boot项目和我的模板我正在使用Thymeleaf和Bootstrap。我有一个DataTable，它有一个操作列，其中一个操作使用户可以删除一个员工。我想添加一个模态，询问用户是否确定要删除该员工。这是HTML：

    <!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">&times;</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>
                                    &nbsp;&nbsp;
                                    <a th:href="@{'/persona/' + ${persona.id_persona} + '/update'}" title="Actualizar Empleado">
                                        <i class="fa fa-pencil-square-o" style="color:green;"></i>
                                    </a>
                                    &nbsp;&nbsp;
                                    <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">&times;</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>

我已经尝试了几乎所有的东西而我无法展示模态。每次我点击链接它什么都不做。有谁知道发生了什么？提前谢谢。

Answer 1

我没有尝试过您的代码，但我认为问题出在第20行，内联JavaScript。

用

替换第20行

<script th:inline="javascript">

官方的Thymeleaf文件中对此进行了解释： http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

还有CSS内联（http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#css-inlining）但除非你在内联代码中使用Thymeleaf变量，否则没有必要。但是使用JavaScript，它总是必须有。

我在博客上有一些关于Thymeleaf的提示和技巧，例如，使用HTML条件评论链接JavaScript可能对您有用：http://lukasgrygar.com/thymeleaf/thymeleaf-tips-and-tricks/#html-conditional-comments

Thymeleaf不会显示bootstrap模态

1 个答案: