태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.
반응형

SlickGrid의 Formatter를 이용하여 순번 컬럼넣는 방법입니다.

 

Formatter를 활용하면 조건에 따라 Sum, 색상 등의 자유롭게 사용가능합니다.

 

순번 Formatter 소스로 row Index는 0부터 시작이므로 1을 더해주면 순번이 됩니다.
function NumberFormatter(row, cell, value, columnDef, dataContext) {
	return row + 1;
}

 

위의 Formatter를 컴럼에 적용합니다.
var columns = [
    {id: "no", name: "No", field: "no", formatter: NumberFormatter},
    ...
];

 

실행하면 첫번째 컬럼에 순번이 표시됩니다.

 

전체 소스입니다.
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Start Slick Grid</title>
	<link rel="stylesheet" href="js/slickgrid/slick.grid.css" type="text/css"/>
	<link rel="stylesheet" href="js/slickgrid/css/smoothness/jquery-ui.css" type="text/css"/>
	
	
	<script src="js/slickgrid/lib/jquery-1.12.4.min.js"></script>
	<script src="js/slickgrid/lib/jquery.event.drag-2.3.0.js"></script>
	
	<script src="js/slickgrid/slick.core.js"></script>
	<script src="js/slickgrid/slick.grid.js"></script>
	
	<script>
	$(document).ready(function () {
		// 컬럼
		var columns = [
		    {id: "no", name: "No", field: "no", formatter: NumberFormatter},
		    {id: 'col1', name: 'col 1', field: 'col1', width:100},
    	    {id: 'col2', name: 'col 2', field: 'col2', width:100},
		    {id: "creator", name: "Creator", field: "creator", width:150, sortable: false}
		];
		
		// 옵션
		var options = {
			enableColumnReorder: false
		};
		
		// 데이터(json)
		var data = [
			{ col1: "Title 1", col2: "Title 2", creator:"Creator 1"},
			{ col1: "Title 2", col2: "Title 2", creator:"Creator 2"},
			{ col1: "Title 3", col2: "Title 2", creator:"Creator 3"}
		];
		
		// SlickGrid 생성
		var grid = new Slick.Grid("#myGrid", data, columns, options);
	});
	
	function NumberFormatter(row, cell, value, columnDef, dataContext) {
		return row + 1;
	}
	</script>
</head>
<body>
	<div id="myGrid" style="width:600px;height:500px;"></div>
</body>
</html>

 

 

반응형
블로그 이미지

Dokon Jang

댓글을 달아 주세요