SMART datagrid v1.4 > Examples
데이터셀을 포함해서 header, footer, summary 셀들 위에 마우스가 일정 시간 위치하면 툴팁이 표시되도록 할 수 있다. 또, 툴팁에 표시되는 내용은 html로 상황에 맞게 구성할 수 있다.
툴팁이 표시되려면 먼저 DisplayOptions.showTooltip이 true로 지정돼야 한다. 그리고, 각 영역 모델의 tooltipCallback 속성에 html 내용을 리턴하는 콜백함수를 지정해야 한다.
각 영역별로 html 툴팁 내용을 리턴하는 콜백 속성들이 존재한다.
GridHeader.tooltipCallback, GridFooter.tooltipCallback, HeaderSummary.tooltipCallback, GridBody.tooltipCallback,
또, 데이터셀의 경우 컬럼별로 ValueColumn.tooltipCallback을 지정할 수도 있고, 이 속성이 GridBody.tooltipCallback 보다 우선한다.
grid.setOptions({
footer: {
tooltipCallback: function (column, value) {
if (!isNaN(value)) {
var grid = column.grid();
var fld = column.dataIndex();
return '<span style="text-decoration:underline;">' + column.header().displayText() + '</span><br>' +
'합계: <b>' + DataLudi.formatNumber('#,##0.00', grid.getSummary(fld, 'sum')) + '</b><br>' +
'평균: <b>' + DataLudi.formatNumber('#,##0.00', grid.getSummary(fld, 'avg')) + '</b>';
}
}
},
});
DisplayOptions.tooltipDelay: ms. 현재 셀에서 툴팁이 보여지기 전 대기 시간.
DisplayOptions.tooltipDuration: ms. 툴팁이 표시되는 기간. 다른 셀로 이동하면 바로 사라진다.
true면 tooltip 대상이 변경될 때 tooltip view를 끊임없이 이어서 이동시킨다. v 1.4.0
툴팁 뷰의 배경색 및 기본 폰트 등은 DisplayOptions.tooltipStyles로 지정하거나, GridBase.loadStyles에서 tooltip 영역으로 설정할 수 있다.
데이터셀의 경우 셀 렌더러 수준에서 showTooltip 속성으로 툴팁 표시 여부를 지정할 수도 있는데, 그 경우 GridBody.tooltipCallback이나 ValueColumn.tooltipCallback은 무시된다. Link Cell Renderer 예제를 참조한다.