WEB most jól működik Datatables-sel.

2025-03-11 16:54:50 +01:00
parent e5b1649c42
commit 8f9e5df847
11 changed files with 370 additions and 7 deletions
@@ -0,0 +1,101 @@
+@page
+@model WorkFlowCheck.Web.Pages.BaseStock.CheckPoints.CheckPointEditPageModel
+@{
+    ViewData["Title"] = "Ellenőrzési pont";
+    var checkpointId = Model.CheckPoint.Id;
+    var url = Url.Page("./CheckPointEditPage", "LoadCheckListTemplateRows", new { id = checkpointId });
+}
+<h1>@ViewData["Title"]</h1>
+
+<input type="hidden" id="checkPointEditUrl" value="@url" />
+
+<div>
+    <form method="post">
+        <input type="hidden" id="hiddenCheckPointId" value="@Model.CheckPoint.Id" />
+
+        <div class="form-group">
+            <label asp-for="CheckPoint.ShortName"></label>
+            <input asp-for="CheckPoint.ShortName" class="form-control" />
+            <span asp-validation-for="CheckPoint.ShortName" class="text-danger"></span>
+        </div>
+        <div class="form-group">
+            <label asp-for="CheckPoint.Code"></label>
+            <input asp-for="CheckPoint.Code" class="form-control" />
+            <span asp-validation-for="CheckPoint.Code" class="text-danger"></span>
+        </div>
+        <button type="submit" class="btn btn-primary">Mentés</button>
+    </form>
+</div>
+
+<div class="d-flex justify-content-end">
+    <button class="btn btn-primary float-right">Új elem hozzáadása</button>
+</div>
+<div>
+    <table id="tbCheckPointsEditPage" class="table table-bordered table-hover table-sm" style="width:100%">
+        <thead class="table-primary">
+            <tr>
+                <th>ID</th>
+                <th>RowIndex</th>
+                <th>OperationDescription</th>
+                <th>AnswerType</th>
+                <th class="text-center">Action</th>
+            </tr>
+        </thead>
+        <tfoot class="table-light">
+            <tr>
+                <th>ID</th>
+                <th>RowIndex</th>
+                <th>OperationDescription</th>
+                <th>AnswerType</th>
+                <th class="text-center">Action</th>
+            </tr>
+        </tfoot>
+    </table>
+</div>
+
+@section Scripts {
+    <script>
+
+        const table = new DataTable('#tbCheckPointsEditPage', {
+                ajax: {
+                       url: $('#checkPointEditUrl').val(),
+                       type: "GET",
+                       dataSrc : "data"
+                },
+                columns: [
+                    { data: "id" },
+                    { data: "rowIndex" },
+                    { data: "operationDescription" },
+                    { data: "answerType" },
+                    { data: null, render: function (data, type, row) {
+                        return `<button class="btn btn-primary edit-btn" data-id="${row.id}">Módosítás</button>
+                                <button class="btn btn-danger delete-btn" data-id="${row.id}">Törlés</button>
+                               `;
+                    }}
+                ],
+                columnDefs: [
+                    {
+                        "targets": 0,
+                        "visible": false
+                    },
+                    {
+                        "targets": 4,
+                        "className": "text-center",
+                        "width": "15%"
+                    }
+                ],
+
+                processing:true
+        });
+        $('#tbCheckPointsEditPage').on('click', '.edit-btn', function ()
+        {
+            const row = table.row($(this).closest('tr')).data();
+
+        });
+        $('#tbCheckPointsEditPage').on('click', '.delete-btn', function ()
+        {
+            const row = table.row($(this).closest('tr')).data();
+
+        });
+    </script>
+}