반응형
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>
반응형
'Javascript' 카테고리의 다른 글
| Slickgrid 멀티헤더(slickgrid-colgroup-plugin) (3) | 2021.07.10 |
|---|---|
| [JS] SlickGrid 체크박스 추가 및 선택된 데이터 얻는 방법 (3) | 2021.05.10 |
| [JS] SlickGrid 다중정렬(Multi Sort)하기 (0) | 2021.03.13 |
| [JS] SlickGrid 단순 정렬하기 (0) | 2021.03.12 |
| [JS] 대용량 데이터에 성능 좋은 SlickGrid 시작하기 (0) | 2021.02.05 |
댓글