728x90
반응형
구현목표: Tabulator 라이브러리를 사용하여 행추가 기능을 확장
기존 라이브러리는 행추가 버튼을 누르면 새로운 행이 추가되고, 거기에 에디터를 달아서 cell을 클릭하여 에디터로 값을 입력하는 기능을 제공한다.
하지만 입력해야 되는 값이 많다면? 입력 폼이 필요할 것이다! 그래서 등록버튼 + 입력 폼 + 팝업을 이용하여 등록 기능을 구현해보았다.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="container">
<div>
<button class="btn btn-success mb-2" id="create" onclick="fn_popup(registerModal);">등록</button>
</div>
<div id="dic">
</div>
<%@ include file="/WEB-INF/include/popup.jsp" %>
</div>
</body>button에 팝업창 띄우는 함수를 추가해준다.
popup.jsp
<div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel"></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" id="form1" name="form1" onsubmit="return false;">
...
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
<button type="button" id="btn_register" class="btn btn-primary" onclick="fn_confirm(this);">확인</button>
</div>
</div>
</div>
</div>table 생성해주는 javascript
var table;
$(function(){
table = new Tabulator("#dic", {
layout:"fitDataFill",
placeholder:"데이터가 존재하지 않습니다.",
columns : [
{ formatter:"responsiveCollapse", width:50, minWidth:50, hozAlign:"center", resizable:false, headerSort:false },
{ title: "순번", field : "DIC_ENT_ID", sorter: "number" },
...
],
responsiveLayout:"collapse"
});
table.setData(url);
});
javascript - 팝업 show, 등록
function fn_popup(id) {
var popup = "#" + id;
$(id).modal("show");
}
function fn_confirm(obj) {
var id = obj.id;
//유효성 체크
if(!validate(id)) {
return;
}
$("#registerModal").modal("hide");
//등록 요청 ajax
$.ajax({
url: url,
type: "post",
data: $("#form1").serialize()
}).done(function(result){
if(result=="1"){
alert("등록을 성공했습니다.");
table.setData();
}
else {
alert("등록을 실패했습니다.");
}
});
}modal에서 확인버튼을 누르면 fn_confirm함수가 호출된다. 이때 ajax로 등록 요청을 하고 성공할 경우
table.setDate()로 table을 reload 시킨다.
그래야 새로 추가한 데이터를 바로 볼 수 있다.
코드에 비해 내용이 너무 단순해서 민망하지만 일단 마무리..
728x90
반응형
'공부기록 > 라이브러리' 카테고리의 다른 글
| [Tabulator] cell & row click event 동시에! (0) | 2021.07.20 |
|---|---|
| [Tabulator] 검색기능 커스터마이징 (1) | 2021.07.19 |
| [Tabulator] 라이브러리 옵션들(반응형 레이아웃, 아이콘 사용) (0) | 2021.07.18 |
| [Tabulator] 사용법(자바스크립트 그리드 라이브러리) (0) | 2021.07.17 |
| jquery dataTables vs. Tabulator 라이브러리 비교 (0) | 2021.07.16 |
