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-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>