컬럼 활용

커스텀 셀렉트 메뉴/커스텀 툴팁

상황에 따라 다른 리스트를 보여주고 싶을 때 사용하는 커스텀 메뉴(셀렉스 리스트)와 원하는 동작, 메시지 등을 보여주고 싶을 때 커스텀 툴팁을 사용합니다.

Step 1: 커스텀 셀렉트 메뉴

type: 'selectmenu' 컬럼 타입을 selectmenu로 사용하고 컬럼 옵션을 통해 원하는 옵션을 설정할 수 있습니다.
inputCallback 콜백 함수는 row, col을 넘겨 받을 수 있으며 이 값을 이용해 원하는 리스트를 만들어 return 하면 됩니다.

• type: 'selectmenu', 'options': {'input': select_data1, itemcount: 3,inputCallback : customSelect}
  

Step 2: 커스텀 툴팁

tooltip: true 기본 툴팁 외에 커스텀 툴팁으로 아래와 같이 3가지 유형으로 사용할 수 있습니다.

아래 예제 소스 중 첫 번째와 두 번째는 html로 툴팁을 만든 것입니다. 만드는 과정에서 row, col, val 등을 사용하여 원하는 퉅팁을 만들어 보여줄 수 있습니다.
마지막 세번째는 툴팁 콜백함수를 사용하여 툴팁을 만든 후 추가로 원하는 동작, 메시지 등을 할 수 있습니다.

• tooltip: true, type: 'html', options: {html: {data: fnHtml}}
  
• tooltip: true, type: 'input', options: {html: {data: fnHtml}}
  
• tooltip: true, type: 'html', options: {html: {data: fnHtml}, tooltipcallback : function(row,col,data){ return 'row : '+ row +'col : ' +col + ''+ data +'';}}
  

---