[Tabulator] 라이브러리 옵션들(반응형 레이아웃, 아이콘 사용)

2021.07.17 - [공부기록/JQUERY] - [Tabulator] 사용법(데이터&테이블 바인딩 라이브러리)

기본적인 사용법은 위 포스트 참조~

이번 포스트에서는 몇가지 옵션에 대해 소개하고자 한다.

[1] 반응형 레이아웃

아래 사진을 보면 좌측에 [-] 아이콘을 누르면 상세내역이 접히고, [+]아이콘과 함께 테이블이 보여진다.

[2] 아이콘 삽입

우측에 수정, 삭제 아이콘 추가

[1] 반응형 레이아웃

var editorIcon = function(cell, formatterParams, onRendered) {
  return "<i class='fas fa-pen'></i>";
}
var deleteIcon = function(cell, formatterParams, onRendered) {
  return "<i class='fas fa-trash-alt'></i>";
}
var 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" },
    { title: "용어명", field : "DIC_ID", sorter: "string" },
    { title: "용어설명", field : "DIC_NAME", sorter: "string", width:200 },
    { title: "프로젝트 구분", field : "DIC_PROJECT_NAME", sorter: "string" },
    { title: "구분", field : "DIC_TYPE", sorter: "string" },
    { title: "컬럼 타입", field : "DIC_TB_TYPE", sorter: "string", responsive: 4 },
    { title: "NULL", field : "DIC_TB_ISNULL", sorter: "string",responsive: 4 },
    { title: "AUTO INC", field : "DIC_TB_AUTO_INC", sorter: "string",responsive: 4 },
    { title: "등록자", field : "REG_USER", sorter: "number" },
    { title: "등록일자", field : "REG_DATE", sorter: "date" },
    { title: "수정자", field : "MOD_USER", sorter: "number", responsive: 3 },
    { title: "수정일자", field : "MOD_DATE", sorter: "date", responsive: 3 },
    { title: "삭제여부", field : "DEL_YN", sorter: "string", visible:false },
    { formatter: editorIcon, width:50, minWidth:50, hozAlign:"center", resizable:false, headerSort:false,
      cellClick:function(e, cell){
        alert("Edit");
      }
    },
    { formatter: deleteIcon, width:50, minWidth:50, hozAlign:"center", resizable:false, headerSort:false,
      cellClick:function(e, cell){
        if(confirm("삭제하시겠습니까?")){
          cell._cell.row.delete();
          //db에 delete 요청
        }
      }
    }
  ],
  responsiveLayout:"collapse"
});

table.setData(url)

반응형 레이아웃을 위해 responsiveLayout: "collapse"를 추가해준다. 이것만 추가했을 경우 우측에 있는 컬럼부터 hide된다. 

그리고 [-], [+] 아이콘을 추가하기 위해, columns의 첫 번째에 formatter를 추가한다.

{ formatter:"responsiveCollapse", width:50, minWidth:50, hozAlign:"center", resizable:false, headerSort:false }

끝에 있는 컬럼이 아닌, 중간에 있는 컬럼을 숨기고 싶을 땐 columns에 responsive를 추가하면 된다. 숫자가 높을수록 먼저 숨겨진다는 뜻! 

 

[2] 아이콘 삽입

icon에 대해 정의해주고 formatter로 columns에 추가해준다.

아이콘 클릭 이벤트를 위해서 callback함수인 cellClick함수를 정의해준다.

cellClick:function(e, cell){ if(confirm("삭제하시겠습니까?")){ cell._cell.row.delete(); } }

콜백함수에서 인자 cell을 출력해보면 다음과 같이 나온다. 해당 cell이 속한 row에 delete 함수가 있어서 써봤더니 잘 지워짐!

그리고 실제로 db에서 데이터를 지우기 위해서 ajax로 delete 요청을 보내면 된다.