/**
# rowNumParam : rowNum 변경 시
# loadonceParam : 데이터 한번 호출 시 true
# widths : 사이즈 조정 // 하단에 얘기할텐데 resize 하는 함수를 재정의 할 예정
**/
// grid 공통 옵션
var commonGridOptions = function(rowNumParam, loadonceParam, widths) {
	var rowNum = 10;
	var loadonce = false;
	if(rowNumParam) {
		rowNum = rowNumParam;
	}

	if(loadonceParam) {
		loadonce = loadonceParam;
	}

	return {
		datatype: "json",   // json, local ...
		mtype: 'POST',      // method type
		height: 400,
		autowidth: true,
		shrinkToFit: true,
		autoencode: true,
		rowNum: rowNum,
		rowList: [ 10, 20, 30, 50, 70, 100 ],
		//recordtext: "View {0} ~ {1} of {2}",
		//recordtext: $.t('common.page.recordtext', {0:'{0}', 1:'{1}', 2:'{2}'}),
		// 정상 Server Response 일 경우 아래 옵션을 처리해야 jqgrid 내부에서 Model Mapping 일 정상 처리됨.
        // 보통 응답 VO 공통으로 처리 할 텐데 필자는 data { result : {...}, totalCount : 10, 등등... }
        // 이렇게 되어 있어 하단처럼 처리했다.
		jsonReader: {
			root: 'data.result'
			,records: 'data.totalCount'
			,total: function (obj) {
				var totalPage = 0;
				if(obj.data) {
					totalPage = Math.ceil(obj.data.totalCount / obj.data.rowCount);
				}
				if(obj.data.totalCount > 0)
					return totalPage
			}
			,page: 'data.currentPage'
		},
		// Server Exception Handling
		loadError: function(xhr, status, error) {
			//ajaxErrorHandle(xhr.responseJSON);
		},
		cmTemplate: {sortable: false},
		pager: "#pager_list",
		viewrecords: true,
		hidegrid: false,
		loadonce: loadonce, // true : 설정 시 데이터 한번만 조회 , false : 계속 
		gridview: true	,   // true 설정 시 grid 속도 3~5배 향상됨. 단, treeGrid, subGrid 또는 afterInsertRow 이벤트를 사용할 수 없다.
		width: widths
	}
};

// grid resize 용
function resizeCustomJqGridWidth($jqDiv, $jqWrap, MIN_WIDTH) {
	$(window).bind('resize', function() {
		if(MIN_WIDTH > $jqWrap.width()) return;

		$jqDiv.setGridWidth($jqWrap.width()-3, true); //Resized to new width as per window
	});
}

// javascript 내용
var $jqGrid = $("#test_list");
var $jqWrap = $("#test_jqGrid_wrapper");
var jqOption = commonGridOptions();         // 위에서 작성한 함수 사용
var MIN_WIDTH = 1000;

// 사이즈 조정
if($jqWrap.width() < 1000){
    jqOption.shrinkToFit = false;
    jqOption.autowidth = false;
}

// 위에서 작성한 함수 사용
resizeCustomJqGridWidth($jqGrid, $jqWrap, MIN_WIDTH);

$jqGrid.jqGrid($.extend({}, jqOption , {
url		 : '/test/url',
datatype : 'local',
colNames : ['test1' ,'test2', 'test3', 'test4'],
colModel : [
    {name: 'test1', index: 'test1',	width: 10,	hidden: true},
    {name: 'test2',	index: 'test2', width: 10,	align: 'center'},
    {name: 'test3',	index: 'test3',	width: 180,	align: 'left'},
    {name: 'test4',	index: 'test4',	width: 180,	align: 'right'
        ,formatter: function ( cellvalue, options, rowObject ) {
            return "<span class='' onclick='fn_testModal.show("+options.rowId+")'>"+cellvalue+"</span>";
        },unformat:function( cellvalue, options, cell){
            return $(cell).find("span").text();
        }
    },
],
pager: "#test_pager",
onPaging: function(data) {
    onPagingCommon(data, this, function(resultMap) {
        // 페이징 처리 시 사용
        searchObj.setSearchParam();
        searchObj.currentPage = resultMap.currentPage;
        searchObj.rowCount = resultMap.rowCount;
        searchObj.currentIndex = resultMap.currentIndex;
        searchGridList(false , $jqGrid , searchObj);
    });
},
onSelectRow : function(rowId , status , e) {},
onCellSelect : function(rowid, idx, cellcontent, e){},
loadComplete: function (jsondata) { },



// html 내용
<div id="test_jqGrid_wrapper" style="overflow: auto">
    <table id="test_list"></table>
    <div id="test_pager"></div>
</div>

var fn_testModal = (function () {
    return {
        init : function() {
            ...
        },
        show : function(rowId) {
            var rowData = $('#test_list').getRowData(rowId);
            ....
       },
    }
})();