tolag3/itn_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

단어사전 수정 중

Browse Source
This commit is contained in:
hylee 2024-05-09 09:51:47 +09:00
parent 9753c05187
commit bab61328a7
1 changed files with 43 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/main/resources/templates/dictionary/list.html
View File

@ -13,6 +13,14 @@
<link rel="stylesheet" th:href="@{/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css}"> <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-responsive/css/responsive.bootstrap4.min.css}">
<link rel="stylesheet" th:href="@{/plugins/datatables-buttons/css/buttons.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> </head>
<body layout:fragment="body"> <body layout:fragment="body">
@ -57,10 +65,11 @@
</div> </div>
<!-- /.card-header --> <!-- /.card-header -->
<div class="card-body"> <div class="card-body">
<table id="dicTb" class="display" cellspacing="0" width="100%"> <table id="dicTb" class="display">
<thead> <thead>
<tr> <tr>
<th></th> <th style="width: 5%;">ID</th>
<th style="width: 5%;">삭제</th>
<th>한글단어</th> <th>한글단어</th>
<th>영어단어</th> <th>영어단어</th>
<th>약어</th> <th>약어</th>
@ -100,6 +109,7 @@
<!-- ./wrapper --> <!-- ./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/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/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"> <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/dataTables.editor.js}"></script>
<script th:src="@{/plugins/datatable_editor/js/editor.dataTables.js}"></script> <script th:src="@{/plugins/datatable_editor/js/editor.dataTables.js}"></script>
<script> <script>
// https://editor.datatables.net/examples/simple/simple.html
var editor = new DataTable.Editor({ var editor = new DataTable.Editor({
ajax: { ajax: {
type: 'POST', type: 'POST',
@ -143,19 +153,23 @@
}, },
fields: [ fields: [
{ {
label: 'koreanWord:', label: 'ID:', // "ID" 대신 다른 레이블을 사용하고 싶다면 여기를 변경
name: 'id'
},
{
label: '한국어 단어:', // "koreanWord"의 레이블을 "한국어 단어"로 변경
name: 'koreanWord' name: 'koreanWord'
}, },
{ {
label: 'englishWord:', label: '영어 단어:', // "englishWord"의 레이블을 "영어 단어"로 변경
name: 'englishWord' name: 'englishWord'
}, },
{ {
label: 'abbreviation:', label: '약어:', // "abbreviation"의 레이블을 "약어"로 변경
name: 'abbreviation' name: 'abbreviation'
}, },
{ {
label: 'Is Confirmed:', label: '확인 여부:', // "Is Confirmed"의 레이블을 "확인 여부"로 변경
name: 'isConfirmed', name: 'isConfirmed',
type: 'select', type: 'select',
options: [ options: [
@ -171,17 +185,24 @@
}); });
var table = $('#dicTb').DataTable({ var table = $('#dicTb').DataTable({
"pageLength": 20, "pageLength": 100,
ajax: { ajax: {
url: '/dictionary/list/load', url: '/dictionary/list/load',
type: 'GET', type: 'GET',
dataSrc: '' dataSrc: ''
}, },
columns: [ 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, orderable: false,
render: DataTable.render.select()
}, },
{ data: 'koreanWord' }, { data: 'koreanWord' },
{ data: 'englishWord' }, { data: 'englishWord' },
@ -198,8 +219,8 @@
topStart: { topStart: {
buttons: [ buttons: [
{ extend: 'create', editor: editor }, { extend: 'create', editor: editor },
{ extend: 'edit', editor: editor }, // { extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor } // { extend: 'remove', editor: editor }
] ]
} }
}, },
@ -214,11 +235,19 @@
editor.inline(this); editor.inline(this);
}); });
editor.on('submitSuccess', function() { editor.on('submitSuccess', function() {
console.log('???');
// editor.DataTable().destroy(); // editor.DataTable().destroy();
table.ajax.reload(null, false); // 수정이 성공한 후 테이블 데이터 리로드 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> </script>
</body> </body>