Hallo zusammen,
ich habe eine kleine Webanwendung mti Thymeleaf erstellt, bei der Einträge in einer Tabelle mithilfe von Datatables dargestellt werden. Die Anzeige funktioniert soweit. Jetzt will ich beim Doppelklicken die Zeile in einen ModelDialog editieren. Das Öffnen des Dialogs mit dem Setzen der Werte geht auch schon. Mein Problem ist nur, wenn ich neue Werte im Dialog eingeben habe, wie kann ich es auf mein Datenmodell setzen und per Rest API abspeichern?
Das Datenmodell sieht so aus
Html Seite, habt ihr eventuell Verbesserungsvorschläge bzgl. dieser Html Seite, bessere Schreibweise, best practises, etc.
- Wo hole ich für das aktuell selektiere Modell her um es an den Restserver schicken zu können? Etwa hiermit table.row(this).data()?
- Wie setze ich die Werte beim Submitten?
ich habe eine kleine Webanwendung mti Thymeleaf erstellt, bei der Einträge in einer Tabelle mithilfe von Datatables dargestellt werden. Die Anzeige funktioniert soweit. Jetzt will ich beim Doppelklicken die Zeile in einen ModelDialog editieren. Das Öffnen des Dialogs mit dem Setzen der Werte geht auch schon. Mein Problem ist nur, wenn ich neue Werte im Dialog eingeben habe, wie kann ich es auf mein Datenmodell setzen und per Rest API abspeichern?
Das Datenmodell sieht so aus
Java:
@Entity
public class Document {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private Long categoryId;
@Column(nullable = true)
private String description;
private String name;
@Column(nullable = true)
private String url;
private LocalDateTime createdOn;
@Column(nullable = true)
private LocalDateTime updatedOn;
private Long statusId;
// Getter und Setter habe ich übersichtshalber weggelassen
}
Html Seite, habt ihr eventuell Verbesserungsvorschläge bzgl. dieser Html Seite, bessere Schreibweise, best practises, etc.
- Wo hole ich für das aktuell selektiere Modell her um es an den Restserver schicken zu können? Etwa hiermit table.row(this).data()?
- Wie setze ich die Werte beim Submitten?
Java:
<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Spring Boot Thymeleaf Application - Bootstrap DataTable</title>
<link th:rel="stylesheet" th:href="@{/webjars/datatables/1.10.21/css/dataTables.bootstrap4.min.css}"/>
<link th:rel="stylesheet" th:href="@{/webjars/datatables-select/1.3.1/css/select.bootstrap4.min.css}"/>
<link th:rel="stylesheet" th:href="@{/webjars/bootstrap/4.5.3/css/bootstrap.min.css} "/>
<link th:rel="stylesheet" th:href="@{/webjars/datatables-buttons/1.6.1/css/buttons.dataTables.min.css}"/>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="/">Thymeleaf - Bootstrap DataTable</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-10 mt-5 mb-5">
<table id="example" class="table table-bordered table-responsive" style="width: 100%">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>CATEGORY</th>
<th>ACTION</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="modal fade" id="editDocumentModal" tabindex="-1" role="dialog" aria-labelledby="editDocumentModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editDocumentModalLabel">Edit Document</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method='POST'>
<div class="form-group">
<label for="textId" class="col-form-label">Id</label>
<input type="text" class="form-control" id="textId" readonly>
</div>
<div class="form-group">
<label for="textName" class="col-form-label">Name</label>
<input type="text" class="form-control" id="textName" required>
</div>
<div class="form-group">
<label for="textTimestamp" class="col-form-label">Timestamp</label>
<input type="text" class="form-control"id="textTimestamp" required>
</div>
<div class="form-group">
<label for="textCategoryId" class="col-form-label">Category Id</label>
<input type="text" class="form-control"id="textCategoryId" required>
</div>
<div class="form-group">
<label for="active" class="col-form-label">Active</label>
<select class="form-control" id="active">
<option value="0">Disabled</option>
<option value="1" selected>Active</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Update</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
<script th:src="@{/webjars/popper.js/2.5.2/umd/popper.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.5.3/js/bootstrap.min.js}"></script>
<script th:src="@{/webjars/datatables/1.10.21/js/jquery.dataTables.min.js}"> </script>
<script th:src="@{/webjars/datatables/1.10.21/js/dataTables.bootstrap4.min.js}"> </script>
<script th:src="@{/webjars/datatables-select/1.3.1/js/select.dataTables.min.js}"> </script>
<script th:src="@{/webjars/datatables-buttons/1.6.1/js/dataTables.buttons.js}"> </script>
<script th:src="@{/webjars/datatables-buttons/1.6.1/js/buttons.flash.min.js}"> </script>
<script th:src="@{/webjars/datatables-buttons/1.6.1/js/buttons.html5.min.js}"> </script>
<script th:src="@{/webjars/datatables-buttons/1.6.1/js/buttons.print.min.js}"> </script>
<script th:src="@{/webjars/pdfmake/0.1.36/build/pdfmake.min.js}"> </script>
<script th:src="@{/webjars/pdfmake/0.1.36/build/vfs_fonts.js}"> </script>
<script th:src="@{/webjars/jszip/3.1.0/jszip.min.js}"> </script>
<script>
var table = $('#example').DataTable({
"processing": true,
"paging": true,
"pageLength": 25,
"info": false,
select: 'single',
responsive: true,
"ajax": {
"url": "/documentlist",
"type": "GET",
"dataType": "json",
"searching": true,
"dataSrc": "",
"contentType": "application/json",
},
"columns": [
{"data": "id" },
{"data": "name" },
{"data": "categoryId"},
{"data": null, defaultContent: '<button type="button" data-toggle="modal" data-target="#editUserModal" class="btn btn-primary">Open</button>'}
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
$('#example tbody').on('click', 'tr', function () {
console.log(table.row(this).data());
$(".modal-body div span").text("");
document.getElementById("textId").value = table.row(this).data().id;
document.getElementById("textName").value = table.row(this).data().name;
document.getElementById("textTimestamp").value = table.row(this).data().createdOn;
document.getElementById("textCategoryId").value = table.row(this).data().categoryId;
$("#editUserModal").modal("show");
});
</script>
</body>
</html>