jqGrid Edit - common

jqGrid v4.6

by 1004lucifer

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-kr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div style="height:300px;">
  <table id="list"><tr><td></td></tr></table> 
  <div id="pager"></div>
  <h4>
  row 클릭 시 편집화면으로 변경되며 값을 변경 후 엔터 입력 시 서버에 요청을 보냄<br/>
  개발자도구로 서버에 전송하는 파라메터 확인가능
  </h4>
</div>

JavaScript

var dataArray = [
  {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx"},
  {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime"},
  {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT"},
  {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX"},
  {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx"},
  {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FedEx"},
  {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX"},
  {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TNT"},
  {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx"}
];

var lastsel2
$("#list").jqGrid({
  datatype: 'local',
  data: dataArray,
  colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
  colModel:[
    {name:'id',index:'id', width:90, sorttype:"int", editable: true},
    {name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
    {name:'stock',index:'stock', width:60, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"}},
    {name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
    {name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}		
  ],
	onSelectRow: function(id){
		if(id && id!==lastsel2){
			jQuery('#list').jqGrid('restoreRow',lastsel2);
			jQuery('#list').jqGrid('editRow',id,true);
			lastsel2=id;
		}
	},
	editurl: "/echo/json",
  caption : 'Users Grid',
  height: 'auto',
  autowidth: true,
  rowNum: 5,
  pager: '#pager'
});