From bab61328a730364aad30cd5785d80d9623272918 Mon Sep 17 00:00:00 2001
From: hylee <hehihoho3@gmail.com>
Date: Thu, 9 May 2024 09:51:47 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8B=A8=EC=96=B4=EC=82=AC=EC=A0=84=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../resources/templates/dictionary/list.html  | 57 ++++++++++++++-----
 1 file changed, 43 insertions(+), 14 deletions(-)
diff --git a/src/main/resources/templates/dictionary/list.html b/src/main/resources/templates/dictionary/list.html
index 494a9a1..cbcb1e0 100644
--- a/src/main/resources/templates/dictionary/list.html
+++ b/src/main/resources/templates/dictionary/list.html
@@ -13,6 +13,14 @@
     <link rel="stylesheet" th:href="@{/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css}">
     <link rel="stylesheet" th:href="@{/plugins/datatables-responsive/css/responsive.bootstrap4.min.css}">
     <link rel="stylesheet" th:href="@{/plugins/datatables-buttons/css/buttons.bootstrap4.min.css}">
+    <style>
+        td.editor-edit button,
+        td.editor-delete button {
+            background: transparent;
+            border: none;
+            color: inherit;
+        }
+    </style>
 </head>
 
 <body layout:fragment="body">
@@ -57,10 +65,11 @@
                                 </div>
                                 <!-- /.card-header -->
                                 <div class="card-body">
-                                    <table id="dicTb" class="display" cellspacing="0" width="100%">
+                                    <table id="dicTb" class="display">
                                         <thead>
                                         <tr>
-                                            <th></th>
+                                            <th style="width: 5%;">ID</th>
+                                            <th style="width: 5%;">삭제</th>
                                             <th>한글단어</th>
                                             <th>영어단어</th>
                                             <th>약어</th>
@@ -100,6 +109,7 @@
     <!-- ./wrapper -->
 
 
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.7/css/dataTables.dataTables.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/3.0.2/css/buttons.dataTables.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/2.0.2/css/select.dataTables.css">
@@ -115,7 +125,7 @@
     <script th:src="@{/plugins/datatable_editor/js/dataTables.editor.js}"></script>
     <script th:src="@{/plugins/datatable_editor/js/editor.dataTables.js}"></script>
     <script>
-
+// https://editor.datatables.net/examples/simple/simple.html
             var editor = new DataTable.Editor({
                 ajax: {
                     type: 'POST',
@@ -143,19 +153,23 @@
                 },
                 fields: [
                     {
-                        label: 'koreanWord:',
+                        label: 'ID:',  // "ID" 대신 다른 레이블을 사용하고 싶다면 여기를 변경
+                        name: 'id'
+                    },
+                    {
+                        label: '한국어 단어:',  // "koreanWord"의 레이블을 "한국어 단어"로 변경
                         name: 'koreanWord'
                     },
                     {
-                        label: 'englishWord:',
+                        label: '영어 단어:',  // "englishWord"의 레이블을 "영어 단어"로 변경
                         name: 'englishWord'
                     },
                     {
-                        label: 'abbreviation:',
+                        label: '약어:',  // "abbreviation"의 레이블을 "약어"로 변경
                         name: 'abbreviation'
                     },
                     {
-                        label: 'Is Confirmed:',
+                        label: '확인 여부:',  // "Is Confirmed"의 레이블을 "확인 여부"로 변경
                         name: 'isConfirmed',
                         type: 'select',
                         options: [
@@ -171,17 +185,24 @@
 
             });
             var table = $('#dicTb').DataTable({
-                "pageLength": 20,
+                "pageLength": 100,
                 ajax: {
                     url: '/dictionary/list/load',
                     type: 'GET',
                     dataSrc: ''
                 },
                 columns: [
+                    // {
+                    //     data: 'id',
+                    //     orderable: false,
+                    //     render: DataTable.render.select()
+                    // },,
+                    { data: 'id' }, // ID 컬럼을 추가하고 숨깁니다.
                     {
-                        data: 'id',
+                        data: null,
+                        className: 'dt-center editor-delete',
+                        defaultContent: '<button><i class="fa fa-trash"/></button>',
                         orderable: false,
-                        render: DataTable.render.select()
                     },
                     { data: 'koreanWord' },
                     { data: 'englishWord' },
@@ -198,8 +219,8 @@
                     topStart: {
                         buttons: [
                             { extend: 'create', editor: editor },
-                            { extend: 'edit', editor: editor },
-                            { extend: 'remove', editor: editor }
+                            // { extend: 'edit', editor: editor },
+                            // { extend: 'remove', editor: editor }
                         ]
                     }
                 },
@@ -214,11 +235,19 @@
             editor.inline(this);
         });
         editor.on('submitSuccess', function() {
-            console.log('???');
-
             // editor.DataTable().destroy();
             table.ajax.reload(null, false);  // 수정이 성공한 후 테이블 데이터 리로드
         });
+
+        // Delete a record
+        table.on('click', 'td.editor-delete button', function (e) {
+            editor.remove(e.target.closest('tr'), {
+                title: 'Delete record',
+                message: 'Are you sure you wish to remove this record?',
+                buttons: 'Delete'
+            });
+        });
+
     </script>
 
 </body>
