본문 바로가기
Javascript

SlickGrid 새로운 Row 추가하기

by Dokon Jang 2021. 3. 26.
반응형

SlickGrid에 새로운 Row를 추가하는 방법입니다.

 

1. 새로운 Row를 추가하는 Javascript 함수를 추가합니다.

function addRow(){
	var data = grid.getData();
	data.splice(data.length,0,{no: null, title: null, creator: null});
	grid.invalidateRow(data.length);
	grid.updateRowCount();
	grid.render();
	grid.scrollRowIntoView(data.length-1)
}

 

2. HTML 에 새로운 Row를 추가하는 버튼을 추가합니다.

<input type="button" value="Add New Row" onClick="addRow();"/>

 

3. 전체 소스입니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!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>
	var grid;
	
	$(document).ready(function () {
		// 컬럼
		var columns = [
		    {id: "no", name: "No", field: "no", sortable: true},
		    {id: "title", name: "Title", field: "title", width:300, sortable: true},
		    {id: "creator", name: "Creator", field: "creator", width:150, sortable: false}
		];
		
		// 옵션
		var options = {
			enableColumnReorder: false
		};
		
		// 데이터(json)
		var data = [
			{ no: 1, title: "Title 1", creator:"Creator 1"},
			{ no: 2, title: "Title 2", creator:"Creator 2"},
			{ no: 3, title: "Title 3", creator:"Creator 3"},
			{ no: 4, title: "Title 2", creator:"Creator 2"},
			{ no: 5, title: "Title 3", creator:"Creator 3"}
		];
		
		// SlickGrid 생성
		grid = new Slick.Grid("#myGrid", data, columns, options);
		
	});
	
	function addRow(){
		var data = grid.getData();
		data.splice(data.length,0,{no: null, title: null, creator: null});
		grid.invalidateRow(data.length);
		grid.updateRowCount();
		grid.render();
		grid.scrollRowIntoView(data.length-1)
	}
	</script>
</head>
<body>
	<input type="button" value="Add New Row" onClick="addRow();"/><p/>
	<div id="myGrid" style="width:600px;height:500px;"></div>
</body>
</html>

 

반응형

태그

댓글0