[Tabulator] 체크박스로 행 선택 / rowSelectionChanged 콜백함수

구현 목표: 첫 번째 컬럼에 체크박스 삽입 후 체크박스로 행 선택 컨트롤

 

 

위와 같이 체크박스로 행 선택하는 건 옵션으로 간단하게 만들 수 있다.

var table = new Tabulator("#example-table", {
    height:"311px",
    columns:[
      {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", 
      	headerSort:false
      },
      {title:"Name", field:"name", width:200},
      {title:"Progress", field:"progress", width:100, hozAlign:"right", sorter:"number"},
      {title:"Gender", field:"gender", width:100},
      {title:"Rating", field:"rating", hozAlign:"center", width:80},
      {title:"Favourite Color", field:"col"},
      {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
      {title:"Driver", field:"car", hozAlign:"center", width:100},
    ],
});

 

이때 행 선택시 어떤 이벤트를 주고 싶다면 아래와 같은 옵션을 추가한다.

 

var table = new Tabulator("#example-table", {
    height:"311px",
    rowSelectionChanged:function(data, rows){
    	//rows - array of row components for the selected rows in order of selection
        //data - array of data objects for the selected rows in order of selection
        //여기에 이벤트 정의
    }
    columns:[
      {formatter:"rowSelection", titleFormatter:"rowSelection", hozAlign:"center", 
      	headerSort:false
      },
      {title:"Name", field:"name", width:200},
      {title:"Progress", field:"progress", width:100, hozAlign:"right", sorter:"number"},
      {title:"Gender", field:"gender", width:100},
      {title:"Rating", field:"rating", hozAlign:"center", width:80},
      {title:"Favourite Color", field:"col"},
      {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
      {title:"Driver", field:"car", hozAlign:"center", width:100},
    ],
});

 

rowSelectionChanged 콜백 함수는 행이 선택될 때마다 호출되는 함수로 data에는 선택된 행의 data가 rows에는 선택된 행이 object형태로 담긴다.

 

http://tabulator.info/docs/4.9/callbacks

Tabulator - Interactive JavaScript Tables

은근 지원하는 콜백함수가 많으니 공식 documentation 잘 참고하시길...