Tabulator - editable list 항목 일부만 표시하는 방법

 

목표

드랍다운 형식으로 편집 가능한 테이블로 생성한 경우,

columnDefaults 속성에 세팅하면 말 그대로 모든 필드가 모두 같은 값을 가지게 된다.

 

 

이걸 아래처럼 특정 칼럼에서는 특정 값들 values 중에서만 선택 가능하도록 수정해 보자.

행(row)을 기준으로 잡았다.

 

 

처리 방법

Tabulator 생성 구문

칼럼마다 edit 관련 속성을 지정할 수 있으나, columns 자체도 ajax 로 생성한 경우에는 아래와 같이 공통 속성으로 지정할 수 밖에 없다.

셀의 편집이 시작되면(클릭하면) 현재 셀에 해당되는 list 항목만 표시하고 나머지는 지운다.

이벤트는 cellEditing 이다.

var table = new Tabulator("#example-table", {
	columnDefaults:{
        width:48,
        editorParams:{
            values:{
                "":"삭제",
                "1":"1", "2":"2", "3":"3", "4":"4", "5":"5",
                "1차":"1차", "2차":"2차", "3차":"3차",
            }
        },
        cellEditing:function(cell) {
        	// 여기
        },
    },
});

 

드랍 다운 목록 HTML 확인

해당 드랍다운 리스트는, 미리 감추어진 상태로 존재하였다가 표시되는 방식이 아니다.

아래 <div> 엘리먼트가 생성, 제거되는 방식이다(크롬 개발자모드에서 pause script execution - F8 확인).

 

 

<div class="tabulator-edit-list tabulator-popup-container">
    <div class="tabulator-edit-list-item tabulator-edit-list-group-level-0">1</div>
    <div class="tabulator-edit-list-item tabulator-edit-list-group-level-0">2</div>
    <div class="tabulator-edit-list-item tabulator-edit-list-group-level-0">3</div>
    <div class="tabulator-edit-list-item tabulator-edit-list-group-level-0">4</div>
    <div class="tabulator-edit-list-item tabulator-edit-list-group-level-0">5</div>
    <!-- 생략 -->
</div>

 

드랍 다운 일부 목록 css 처리

미리 행(row)마다 지정해 놓은 속성을 사용하여 아래처럼 display : none 처리를 하면 된다.

 

cellEditing:function(cell) {
	
    var rowName = cell.getRow().getData().rowName;
    
    $(".tabulator-edit-list-item").css("display", "block");
    
    if ( rowName == 'workNo' ) {

        $(".tabulator-edit-list-item:lt(5)").css("display", "none");

    } else if ( rowName == 'workMember' ) {

        $(".tabulator-edit-list-item:gt(4)").css("display", "none");

    }
    
}

 

이제 테스트해 보면? 전혀 동작하지 않는다.

디버깅 결과 해당 <div> 엘리먼트가 생성되기도 전에 미표시 처리를 하고 있었다.

아래처럼 setTimeout() 으로 아주 잠깐만 지연을 주었더니 정상 동작하였다.

 

cellEditing:function(cell) {

    var rowName = cell.getRow().getData().rowName;

    setTimeout(function() {

		// 여기

    }, 40);

},

 

 

 

참고문헌 및 관련링크

1. Events | Tabulator
2. Callbacks | Tabulator
3. Editing Data | Tabulator