[SlickGrid] 셀(Cell)에 툴팁(Tooltip) 표시하기

SlickGrid의 Header의 툴팁은 컬럼 정의에서 속성으로 처리를 할 수 있습니다.
셀의 경우는 좀 다르게 처리를 해야 셀에 툴팁을 표시 할 수 있습니다.
즉, 셀에 Format을 적용하여 처리를 해야 하네요.

 

1. SlickGrid Version

아래의 예는 SlickGrid v2.4에서 테스트 했으며, 하위 버전에서는 작동하지 않을 수도 있습니다.

 

2. 툴팁을 위한 Format 함수

셀에 툴팀을 표시하기 위해서는 Format의 리턴 값을 JSONObject로 속성 text와 toolTip을 갖고 있어야 합니다.
text는 그리드 셀에 표시되고, toolTip은 셀에 마우스 오버가 되면 툴팁으로 표시됩니다.

function tooltipCellFormat(row, cell, value, columnDef, dataContext){
	var valueJSONObj = {
		text : value,
		toolTip : value + "- Good Day!"
	}
	
	return valueJSONObj;
}

 

3. 컬럼 정의

SlickGrid의 컬럼에 Format을 적용합니다.
formatter 속성에 툴팁 Format 함수를 지정합니다.

var columns = [
	{
		id: "title", 
		name: "Title", 
		field: "title", 
		formatter: tooltipCellFormat}
];

 

4. 자바스크립트 전체 소스

<script>
	function tooltipCellFormat(row, cell, value, columnDef, dataContext){
    	var valueJSONObj = {
			text : value,
			toolTip : value + "- Good Day!"
		}
    	
    	return valueJSONObj;
    }

	var grid;
	var columns = [
		{
			id: "title", 
			name: "Title", 
			field: "title", 
			formatter: tooltipCellFormat}
	];

	var options = {
		enableCellNavigation: true,
		enableColumnReorder: false
	};

	$(function () {
		var data = [];
		for (var i = 0; i < 500; i++) {
			data[i] = {
				title: "Task " + i,
				duration: "5 days",
				percentComplete: Math.round(Math.random() * 100),
				start: "01/01/2009",
				finish: "01/05/2009",
				effortDriven: (i % 5 == 0)
			};
		}

		grid = new Slick.Grid("#myGrid", data, columns, options);
	})
</script>

 

참고) 셀에 Html 태그를 적용하기

툴팁 Format의 JSONObject의 text 속성에 태그를 적용하면 됩니다.
아래의 예는 굵게 하고 빨간색으로 표시한 것입니다.

function tooltipCellFormat(row, cell, value, columnDef, dataContext){
	var valueJSONObj = {
		text : "<span style='color: red;font-weight: bold;'>" + value + "</span>",
		toolTip : value + "- Good Day!"
	}
	
	return valueJSONObj;
}