[javascript] DataTables에서 특정 열을 편집 가능하게 만드는 방법은 무엇인가요?

30 Nov 2023

javascript

DataTable에서 특정 열을 편집 가능하게 만들기 위해서는 editable 플러그인을 사용할 수 있습니다. editable 플러그인은 사용자가 테이블의 셀을 클릭하면 그 셀을 인라인으로 편집할 수 있게 해줍니다.

먼저, DataTable을 초기화하고 editable 플러그인을 로드합니다. 그런 다음, columnDefs 설정을 사용하여 편집 가능한 열을 정의합니다. 다음은 예제 코드입니다:

$(document).ready(function() {
    $('#myTable').DataTable({
        // DataTable 초기화 옵션들
    }).MakeCellsEditable({
        // editable 플러그인 초기화 옵션들
    });
});

이제 해당 테이블의 열을 선택하여 편집 가능하게 만들어보겠습니다. 열 인덱스는 0부터 시작하며, editable 플러그인을 사용하여 편집 가능한 열을 설정합니다:

$(document).ready(function() {
    $('#myTable').DataTable({
        // DataTable 초기화 옵션들
        columnDefs: [{
            targets: [0], // 첫 번째 열
            editable: true
        }, {
            targets: [2], // 세 번째 열
            editable: true
        }]
    }).MakeCellsEditable({
        // editable 플러그인 초기화 옵션들
    });
});

이제 첫 번째 열과 세 번째 열이 편집 가능한 상태로 표시됩니다. 사용자는 그들을 클릭하고 값을 편집 할 수 있습니다.

더 많은 옵션과 사용 예제는 editable 플러그인의 공식 문서를 참조하시기 바랍니다.

참조: