[jQuery] jqGrid row 수정하기 (editable 설정하기, editRow, saveRow 사용하기)

jqGrid 리스트의 데이터를 편집하는 소스 코드입니다. 편집 가능한 열을 만들기 위해 colModel 옵션에 editable:true를 추가해 줍니다. row에 formatter 함수를 통해 수정/저장/취소 버튼을 만들고 클릭했을 때 해당 rowId를 가져와서 처리할 수 있습니다.

수정 버튼을 클릭했을 때는 editRow 메서드를 통해서 특정 행을 편집 가능한 모드로 만듭니다. 저장 버튼은 saveRow 메서드를 통해서 데이터를 저장할 수 있으며, editRow 상태인 행에 대해서만 동작합니다. saveRow 메서드 호출 시 url을 각자 맞게 입력하셔서 데이터를 저장하시면 됩니다.

간단한 예제 이니 참고해서 사용하시면 됩니다.

 

<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() {
	var mydata = [
		{user_name:"test0", user_id:"id1",product:"상품1", use_yn:"N", idx:"1"},   
		{user_name:"test2", user_id:"id2",product:"상품1", use_yn:"N", idx:"2"},
		{user_name:"test3", user_id:"id3",product:"상품1", use_yn:"N", idx:"3"},
		{user_name:"test3", user_id:"id4",product:"상품1", use_yn:"N", idx:"4"},
		{user_name:"test2", user_id:"id2",product:"상품1", use_yn:"N", idx:"5"},
		{user_name:"test3", user_id:"id3",product:"상품2", use_yn:"Y", idx:"6"},
		{user_name:"test4", user_id:"id5",product:"상품2", use_yn:"Y", idx:"7"},
		{user_name:"test2", user_id:"id2",product:"상품2", use_yn:"Y", idx:"8"},
		{user_name:"test3", user_id:"id3",product:"상품2", use_yn:"N", idx:"9"},
		{user_name:"test6", user_id:"id6",product:"상품2", use_yn:"N", idx:"10"},
		{user_name:"test2", user_id:"id2",product:"상품2", use_yn:"Y", idx:"11"},
		{user_name:"test3", user_id:"id3",product:"상품2", use_yn:"Y", idx:"12"},
		{user_name:"test7", user_id:"id7",product:"상품2", use_yn:"N", idx:"13"},
		{user_name:"test2", user_id:"id2",product:"상품2", use_yn:"N", idx:"14"},
		{user_name:"test3", user_id:"id3",product:"상품2", use_yn:"Y", idx:"15"},
		{user_name:"test8", user_id:"id7",product:"상품2", use_yn:"N", idx:"16"},
		{user_name:"test2", user_id:"id2",product:"상품2", use_yn:"N", idx:"17"},
		{user_name:"test3", user_id:"id3",product:"상품2", use_yn:"N", idx:"18"},
		{user_name:"test4", user_id:"id4",product:"상품2", use_yn:"Y", idx:"19"}
	];

	$("#list").jqGrid({
		datatype: "local",
		data: mydata,
		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,
	});

	$(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>
<table id="list"></table>
<div id="pager"></div>

 

jqgrid 리스트

 

jqgrid 수정 클릭했을때 데이터 편집