[jqGrid] getRowData 를 이용시 \r\n 값이 사라지는 현상 in IE8

jqGrid 를 사용하면서 또한가지 이슈가 발견되었다. 뭐 이슈라기 보다 지금까지 여러 프로젝트에 jqGrid 를 사용하였지만 아직 발견되지 않았던 것이라고 하는게 맞겠다. 해당 이슈를 공유하고자 한다. 물론 더 좋은 방법이 있으면 이곳에서 공유했으면 하는것이 필자의 바람이기도 하다. 

 화면 

리스트와 편집을 동시에 하는 화면을 구현하였다. 이때 리스트를 그리드로 구현하고 편집 화면은 폼(input, select, textarea 등으로 구성된)으로 구성하였다. 리스트에서는 화면에 보이지 않는 , 즉 편집(폼)을 위한 데이터까지 Grid 에서 가지고 있다가(hidden:true 이용) 선택시(onSelectRow 이벤트) 폼화면을 Grid 의 getRowData 함수를 이용하여 채우려는데 있다. 

 현상 

FF, Chrome 에서는 getRowData 의 값을 이용하여 폼(textarea)을 채우는데 문제가 없었다. 하지만 IE8에서는 DB로부터 가져온 데이터중 '\r\n' 의 값이 있으면 grid.jqGrid('getRowData') 에서 처리를 하지 못하는 현상이 발생하였다. '\r\n' 을 제대로 처리하지 못하는 것이었다. 즉 new line 이 사라지는 문제가 발생한 것이다. IE8 에서말이다. 

 해결방안 

0. 선택시(onSelectRow) DB에서 다시한번 데이터를 가져오는 방법이다. 가장 안전(?)한 방법이긴 하지만 불필요한 트랜잭션이 발생하여 서버 부하를 준다. 이방법은 애초에 원했던 방법이 아니므로 패스하겠다. 좀 더 좋은 방법을 찾는 것이 목표니까.

1. 첫번째 방법은 loadcomplete 를 이용하여 DB로 부터 가져온 값을 임시로 저장했다가 필요할때 사용하는 방법이다. loadComplete 함수를 이용하여 파라메터로 전달받은 데이터를 임시로 가지고 있다가 선택시 ID 값으로 index 를 알아낸 후 index 의 값을 이용해서 data 로 부터 데이터를 가져오는 방법이다. 이 방법도 잘 사용할 수 있는데 스크롤을 이용하여 데이터를 붙여나가는 경우 (scroll : 1)에는 원하는 값이 나오지 않을 수 있다는 버그(?)가 있다. 아래는 사용한 코드이다. 

onSelectRow : function(rowId){

var _index = grid.jqGrid('getInd', rowId) - 1;

var _row = _data.list[_index];

var _textbox = _row['comment'];

// TODO : Form 셋팅

},

loadComplete : function(data) {

_data = data;

}

2. 그래서 좀 더 고민을 하다가 나온것이 Grid 의 formatter, unformat 를 이용하는 방법이다. formatter 를 이용하여 '\r\n' 의 값을 변환하였다가 unformat 를 이용하여 다시 변환하는 형태로 '\r\n'값을 유지하는 방법이다. 대신 조건이 있다. 이때는 hidden : true 일 경우에만 가능하다는 것이다. 이는 따로 말을 안해도 될 것이다. 부가적인 설명은 생략하고 코드로 대신하겠다. 

// ColModel

formatter : textareaFormatter, unformat: textAreaUnformat

// Function 

function textareaFormatter( cellvalue, options, rowObject ){

  if(cellvalue == null) return '';

return cellvalue = cellvalue.replace(/\r\n|\r|\n/g,"###~~");

}

function textAreaUnformat(cellvalue, options){

return cellvalue = cellvalue.replace(/###~~/g,"\r\n");

}

 참고 

jqGrid WIKI (http://www.trirand.com/jqgridwiki/doku.php)

jqGrid Demo (http://trirand.com/blog/jqgrid/jqgrid.html)

http://www.trirand.com/blog/?page_id=393/help/carriage-returns-lost-in-edit/