본문 바로가기
Javascript

SlickGrid 순번 컬럼 넣기

by Dokon Jang 2021. 7. 19.
반응형

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>

 

 

반응형

댓글0