[jQuery] jqGrid 행 추가/삭제 하기 (addRowData / delRowData)

jqGrid에서 많이 사용하시는 행 추가/삭제하는 소스 코드입니다.

addRowData() 함수는 jqGrid에 새로운 행을 추가하는 데 사용됩니다.

addRowData() 함수는 2개의 매개변수를 사용합니다. 첫 번째 매개변수는 새로운 행의 ID이며, 두 번째 매개변수는 추가할 행의 데이터입니다. 이 데이터는 객체 형태로 전달됩니다. 객체의 속성은 테이블의 열에 해당하며, 값은 행의 데이터입니다. addRowData() 함수는 행을 추가하기 전에 해당 행이 이미 존재하는지 확인하므로, 동일한 ID를 가진 행이 이미 존재하는 경우 기존 행을 업데이트합니다. 아래 소스 코드에서 행 추가/삭제 버튼을 통해서 확인하실 수 있습니다.

 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" type="text/css" />
 <!-- jqGrid CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css" type="text/css" />
<!-- The actual JQuery code -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" /></script>
<!-- The JQuery UI code -->
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js" /></script>
<!-- The jqGrid language file code-->
<script type="text/javascript" src="//cdn.jsdelivr.net/jqgrid/4.6.0/i18n/grid.locale-kr.js" /></script>
<!-- The atual jqGrid code -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.src.js" /></script>

<script>
$(document).ready(function() {
	$("#list").jqGrid({
		datatype: "local",
		colNames:['관리', '이름', '아이디','상품', '사용여부', 'idx'],
		colModel:[
			{name:'empty', index: 'empty', align: "center", formatter:formatOpt, sortable: false, width:50},
			{name:'user_name', index:'user_name', width:100 , align: "center" , editable : true},
			{name:'user_id', index:'user_id', width:150, align: "center", editable : true},
			{name:'product', index:'product', width:80, align: "center" , editable : true},
			{name:'use_yn',index:'use_yn', align: "center", editable: true, edittype:"select",editoptions:{value:{'':'', Y:'Y',N:'N'}}, width:90},
			{name:'idx', index: 'idx', hidden: true}
		],
		autowidth: true,
		pager:'#pager',
		rowNum: 10,
		rowList: [10, 20, 50],
		sortname: 'user_name',
		sortorder: 'desc',
		height: 250,
	});
	
	$("#btn_add_row").click(function(){
		var data = {user_name:'홍길동', user_id:"hong1", product:"홍길동 상품", use_yn:"Y"};
		rowId = $("#list").getGridParam("reccount"); // 페이징 처리 시 현 페이지의 Max RowId 값
		$("#list").jqGrid("addRowData", rowId+1, data, 'first'); // 첫행에 Row 추가
		//$("#list").jqGrid("addRowData", rowId+1, data, 'last'); // 마지막 행에 Row 추가
	});
	
	$("#btn_delete_row").click(function(){
		rowId = $("#list").getGridParam("reccount"); // 페이징 처리 시 현 페이지의 Max RowId 값
		$("#list").delRowData(rowId);
	});

	$(window).on('resize.jqGrid', function() {
		$("#list").jqGrid('setGridWidth', $("#list").parent().parent().parent().parent().parent().width());
	})
	$(".jarviswidget-fullscreen-btn").click(function(){
		setTimeout(function() {
			$("#list").jqGrid('setGridWidth', $("#list").parent().parent().parent().parent().parent().width());
		}, 100);
	});

});

function formatOpt(cellvalue, options, rowObject){
	var str = "";
	var row_id = options.rowId;
	str += "<div class=\"btn-group\">";
	str += " <button onclick=\"javascript:edit('" + row_id + "')\">수정</button>";
	str += " <button onclick=\"javascript:save('" + row_id + "')\">저장</button>";
	str += " <button onclick=\"javascript:cancel('" + row_id + "')\">취소</button>";
	str += "</div>";

	return str;
}
function edit(id){
	var row = $("#list").jqGrid('getRowData',id);

	$("#list").editRow(id);
}
function save(id){
	var row = $("#list").jqGrid('getRowData', id);

	$("#list").jqGrid('saveRow',id, {
		"url": "/save.php?idx="+row.idx,
		"mtype": "POST",
		"succesfunc": function(response) {
		  return true;
		}
	});
}
function cancel(id){
	$("#list").restoreRow(id);
}
</script>
<button type="button" id="btn_add_row"><strong>행 추가하기</strong></button>
<button type="button" id="btn_delete_row"><strong>행 삭제하기</strong></button>
<table id="list"></table>
<div id="pager"></div>

 

행 추가하기 버튼으로 list 추가