JqGrid ) 특정 셀 select 옵션 나타내기 / 옵션 선택 후 보여지는 값 바꾸기

 

var table_id      = "#table_id";
if( $(table_id)[0].grid ){
	      $.jgrid.gridUnload(table_id);
}

var value_array = [{code : "A", description: "알파벳 에이요"},
    				   {code : "B", description: "알파벳 비요"},
                        	......
                       {code : "Z", description: "알파벳 제트요"}] // value 값 들어있는 array ;
	
var value_desc = ""; //select 선택하는 옵션에서 보일 desc 

// 보이게하고싶은 selectoption이 A - 알파벳 에이요 이런식이면 아래처럼 조합한다.
for(var i=0; i<value_array.length; i++){	
	// ; 연산자로 구분을 하기때문에 마지막에 ; 연산자가 있다면 값이 있다고 판단하여 select옵션 마지막에 undefined가 나온다.
    // 따라서 마지막 i에는 연산자 ;를 붙이지 않는다. 
    value_array[i].description = (i+1) == value_array.length ? value_array[i].description : value_array[i].description + ";";
	value_desc += value_array[i].code + ":" +  value_array[i].code+ "-" + value_array[i].description;	
}
	
   
//서명,발행자,isbn,저자,발행년 을 던져야 함.
var column = [	
	 // 처음엔 formatter : 'select'도 줬는데 값안나와서 없애니 됐음 
	{ label: '별치기호', name: 'separate_shelf_code',width:73,
     editable:true,  edittype:'select', editoptions: {value:shelf_desc}},		
 ];
	 
$(table_id).jqGrid({
	datatype	: "local",
	data		: data,
	colModel	: column,
				... 기타 등등 옵션 
   	cellEdit	: true,
    cellsubmit  : 'clientArray', //remote와 clientArray가 있는데데이터 url 바로 넣어주는거 아니면 clientArray
 	afterSaveCell: function(rowid, cellname, value, iRow, iCol){
 	// 세번째 순서 : 상단에 정의한 table id 
    // select 옵션에는 A - "알파벳 에이요" 이지만 선택 후 그리드에는 value값인 A만 보이게 됌. 
  		$(table_id).jqGrid('setCell', rowid , cellname , value); 
 
 	},
 	afterEditCell:function(rowid, cellname, value, iRow, iCol){
 		// 두번째 순서 : cell 저장 후 afterSaveCell로 감. 
 		$("#"+rowid+"_"+cellname).blur(function(){
 		 $(table_id).jqGrid("saveCell",iRow,iCol);
 		});
 	}	    
});	 
	 
// 첫번째 순서 : 그리드 외 클릭 (포커스 아웃시) editCell로 가게끔.  
$(document).on('focusout', '[role="gridcell"] *', function() {
		
		$(table_id).jqGrid('editCell', 0, 0, false);
		    
});