무료 Datatables Editor 소개

관련지식
javascript, jquery, Datatables, editor

Datatables를 사용하면서 수정 기능이 필요하게 되었습니다. 역시 가장 좋은 기능은 https://editor.datatables.net/ 이것으로 생각되지만 유료 라이센스라는게 문제네요. 어차피 많은 기능이 필요하지 않으므로 사용하기 간단하게 만들어보았습니다. 아래와 같은 인라인 에디터 입니다.

기존 로직을 영향없이 사용할수 있다는게 가장 큰 장점인것 같고 아직 기능이 많지 않다는것이 단점이겠네요. 간단하게 쓰실분만 추천합니다. JQuery와 Datatables에 의존성있습니다.

다운로드
https://github.com/sub0709/datatable-editor

기본 사용방법

생성 옵션은 다르겠지만 보통 아래와 같은 형태로 데이터테이블을 생성하실 것입니다.

var table1 = $('#userTable').DataTable({
  dom : 'Bfrtip',
  data : [{"aaa":"아이유","bbb":"분홍신","ccc":1584341626075,"ddd":10},{"aaa":"반하나","bbb":"우리","ccc":1584341616075,"ddd":10},{"aaa":"이예준","bbb":"미친소리","ccc":1584341626375,"ddd":10},{"aaa":"박혜원","bbb":"봄의발라드","ccc":1584341526075,"ddd":10}],
  columns : [
    {data : 'aaa'},
    {data : 'bbb'},
    {data : 'ccc'},
    {data : 'ddd'}
  ]
});

만약 0번째 컬럼을 수정 가능하도록 하고 싶다면 단지 아래처럼 추가로 코딩을 하면 됩니다.

var table1 = $('#userTable').DataTable({
  dom : 'Bfrtip',
  data : [{"aaa":"아이유","bbb":"분홍신","ccc":1584341626075,"ddd":10},{"aaa":"반하나","bbb":"우리","ccc":1584341616075,"ddd":10},{"aaa":"이예준","bbb":"미친소리","ccc":1584341626375,"ddd":10},{"aaa":"박혜원","bbb":"봄의발라드","ccc":1584341526075,"ddd":10}],
  columns : [
    {data : 'aaa'},
    {data : 'bbb'},
    {data : 'ccc'},
    {data : 'ddd'}
  ]
});
datatableEdit({
  dataTable : table1,
  columnDefs : [
    {
      targets : 0
    }
  ]
});

이제 0번째 컬럼에 있는 셀을 클릭하면 텍스트필드로 바뀔것이고 Enter키를 입력하면 수정됩니다. ESC키를 입력하거나 다른 영역을 클릭하면 수정된 내용은 취소 됩니다.

다중 테이블 적용

아래처럼 클래스를 이용하여 여러개의 테이블을 생성했을수도 있습니다.

var tables = $('.table').DataTable();

상관없습니다. 사용법은 동일합니다. 아래처럼 호출하면 여러 테이블의 0번째 컬럼이 수정가능하도록 변경됩니다.

datatableEdit({
  dataTable : tables,
  columnDefs : [
    {
      targets : 0
    }
  ]
});

수정 이벤트

값이 수정되었을때 URL을 호출해서 DB를 업데이트 하던가 또는 다른 기능을 하고 싶을수 있습니다.

onEdited 함수를 정의하면 해당 셀의 변경 전/후의 값, 위치, DataTable의 Cell정보를 콜백받을수 있습니다. Cell정보를 통하여 Row 데이터등에 접근할수도 있습니다.

datatableEdit({
  dataTable : table1,
  columnDefs : [
    {
      targets : 0
    },
    {
      targets : 2
    },
    {
      onEdited : function(prev, changed, index, cell) {
        console.log('4444444444');
        console.log(prev, changed, index, cell);
      },
      targets : 3
    },
  ]
});

만약 모든 셀의 에디팅 후 기능이 동일하다면 onEdited 함수를 하나만 정의하면 됩니다.

datatableEdit({
  dataTable : table1,
  columnDefs : [
    {
      targets : 0
    },
    {
      targets : 2
    },
    {
      targets : 3
    }
  ],
  onEdited : function(prev, changed, index, cell) {
    console.log(prev, changed, index, cell);
  }
});