728x90
반응형
자바스크립트 grid 라이브러리 - Tabulator
Tabulator - Interactive JavaScript Tables
Create interactive data tables in seconds with Tabulator. A lightweight, fully featured JavaScript table generation library.
tabulator.info
간단하게 소개하자면 HTML 테이블과 js array, ajax data source, json 데이터를 테이블로 만들어주는 라이브러리입니다.
가장 훌륭한 점은 무료라는 거쥬!
예제와 doc이 잘 정리되어 있으니 사실 이것만 보고도 잘 사용할 수 있다.
반드시 필요한 js와 css
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.0.5/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.0.5/dist/css/tabulator.min.css" rel="stylesheet">
그리고 다양한 theme과 연동이 가능하다. 나는 bootstrap 4를 썼다. (다운로드 페이지에서 다운로드 가능)
<link rel="stylesheet" type="text/css" href="<c:url value='/css/tabulator_bootstrap4.min.css'/>" />
[스프링부트/RestController/원격데이터호출]
- ajax로 data 받아오기(json)
- 컬럼 hidden
<body>
<div id="dic"></div>
<script type="text/javascript">
$(function(){
var url = "http://localhost:7800/dic";
var table = new Tabulator("#dic", {
layout:"fitDataTable",
placeholder:"데이터가 존재하지 않습니다.",
columns : [
{ title: "순번", field : "DIC_ENT_ID", sorter: "number" },
{ title: "용어명", field : "DIC_ID", sorter: "string" },
{ title: "용어설명", field : "DIC_NAME", sorter: "string" },
{ title: "프로젝트 구분", field : "DIC_PROJECT_NAME", sorter: "string" },
{ title: "구분", field : "DIC_TYPE", sorter: "string" },
{ title: "컬럼 타입", field : "DIC_TB_TYPE", sorter: "string" },
{ title: "NULL", field : "DIC_TB_ISNULL", sorter: "string" },
{ title: "AUTO INC", field : "DIC_TB_AUTO_INC", sorter: "string" },
{ title: "등록자", field : "REG_USER", sorter: "number" },
{ title: "등록일자", field : "REG_DATE", sorter: "date" },
{ title: "수정자", field : "MOD_USER", sorter: "number" },
{ title: "수정일자", field : "MOD_DATE", sorter: "date" },
{ title: "삭제여부", field : "DEL_YN", sorter: "string", visible:false }
]
});
table.setData(url);
});
</script>
</body>아주 간단하다. field명과 title을 잘 입력해주고 table.setData(url); 로 data 불러오면 끝...
setData(url)을 통해 ajax로 데이터를 호출해온다.
속성을 설명하자면 layout은 테이블을 어떤식으로 배치할 건지에 대한 속성이다. 공홈에 예제와 함께 다양하게 소개되어 있으니 참고하세여
placeholder는 데이터가 없을 경우 출력되는 문구
colunms에서 visible:false를 쓰면 해당 데이터는 숨겨진다.
아래와 같이 데이터가 잘 불러와진다.
728x90
반응형
'공부기록 > 라이브러리' 카테고리의 다른 글
| [Tabulator] 등록 버튼 + 입력 폼 + 팝업 + 행 추가 (0) | 2021.07.18 |
|---|---|
| [Tabulator] 라이브러리 옵션들(반응형 레이아웃, 아이콘 사용) (0) | 2021.07.18 |
| jquery dataTables vs. Tabulator 라이브러리 비교 (0) | 2021.07.16 |
| [Jquery dataTables] 라이브러리 - 체크박스로 전체선택 기능 구현 (0) | 2021.07.15 |
| [Jquery DataTables] 라이브러리 기본 사용법 (0) | 2021.07.15 |
