[jqGrid/제이큐그리드] jqGrid 다시 그리기 ( 동적 그리기)

일단 기본적인 그리드가 생성이 되어 있었다. (내가 만든 코드가 아니라서 자세한 사항은 아직 알지 못했다.)

	function docGrid(){
			/* 22011__그리드 */
			// 그리드에 코드값 바인딩 
				var approval_code ='<base:gridSelect codeList="${APPROVAL_CODE}"/>';
				
				initListURL = '${ctx}/grp/approval/myApproval/listDrafted.json?&from_date=${from_date}&to_date=${toDay}&sttus_cd=Y';
				//console.log("리스트"+initListURL);
				
				jqGrid.jqGrid({
					url : initListURL
					,sortname : 'doc_reg_dt'
					,sortorder : 'desc'	
					,colNames : [
						'no','Classification(문서분류)' ,'문서순번', 'Number','키워드', 'Title', '<i class="fa ti-clip "></i>','Registrant','Date','Status(결재상태)','Approval Date(결재일시)' 
						,'온라인문서여부', '문서갱신번호'
						,'결재순번', '관련문서순번', 'FBS순번', '게시글순번', '프로젝트순번'
						,'문서발송순번', '회람순번', '등록자순번'
						, '게시글등록일자', '수정자순번','수정자', '게시글수정일자'
					],
					colModel : [
						{
							name : 'cno'
							,width : 30
							,align : 'center'
							,hidden : true
						}   
						,{
							name : 'fbs_nm'
							,width : 150
							,align : 'left'
							,hidden : true
						}
						,{
							name : 'doc_dseq'
							,width : 0
							,hidden : true
							,key : true
						}
						,{
							name : 'doc_no'
							,width : 100
							,align : 'left'
							,frozen : true
						}
						,{// 211221__인천 키워드
							name : 'keyword'
							,width : 100
							,align : 'left'
							,frozen : true
							,hidden : true
						}
						,{
							name : 'title'
							,width : 300
							,align : 'left'
						}
						,{
							name : 'attch_cnt'
							,width : 50
							,align : 'center'						
							,hidden : true
						}
						,{
							name : 'reg_user_nm'
							,width : 100
							,align : 'center'						
						}
						,{
							name : 'doc_reg_dt'
							,width : 100
							,align : 'center'
						}
						,{
							name : 'sttus_cd'
							,width : 100
							,align : 'center'
						  	,formatter : "select"
							,formatoptions : {
								value : approval_code
							}
							,hidden : true
						}
						,{
							name : 'app_updt_dt'
							,width : 120
							,align : 'center'
							,hidden : true
						}
						,{
							name : 'online_yn'
							,width : 60
							,align : 'center'
							,hidden : true
						}
						,{
							name : 'revision_no'
							,width : 500
							,align : 'center'
							,hidden : true
						}		
						,{
							name : 'app_dseq'
							,width : 100
							,align : 'center'
							,hidden : true
						}
						,{
							name : 'rel_dseq'
							,width : 500
							,align : 'center'
							,hidden : true
						}
						,{
							name : 'fbs_dseq'
							,width : 500
							,align : 'center'
							,hidden : true
						}
						,{
							name : 'board_dseq'
							,width : 500
							,align : 'center'
							,hidden : true
						}
						,{
							name : 'prj_seq'
							,width : 500
							,align : 'center'
							,hidden : true
						}		
						,{
							name : 'send_dseq'
							,width : 500
							,align : 'center'
							,hidden : true
						}
						,{
							name : 'cir_dseq'
							,width : 500
							,align : 'center'
							,hidden : true
						}
						,{
							name : 'reg_user_seq'
							,width : 500
							,align : 'center'
							,hidden : true
						}
						,{
							name : 'reg_dt'
							,width : 500
							,align : 'center'
							,hidden : true
						}
						,{
							name : 'updt_user_seq'
							,width : 500
							,align : 'center'
							,hidden : true
						}
						,{
							name : 'updt_user_nm'
							,width : 500
							,align : 'center'
							,hidden : true
						}
						,{
							name : 'updt_dt'
							,width : 80
							,align : 'center'
							,hidden : true
						}
					]
					,rowNum : '${gridPageRownum}'
					,rowList : eval('${gridPageScope}')
					,regional : '${locale}'
					,datatype : 'json'
					,viewrecords : true
					,autowidth : true
					,forceFit : true
					,height : '100%'
					,pgbuttons : false	//페이지 버튼 여부
					,pginput : false	//페이지 인풋 여부
					,resize : true
					,sortable : true
					//,pager : jqGridPage
					//,onSortCol : clearCreateForm
					//,onPaging : clearCreateForm
					,loadError : function(xhr, status, error) {
						BaseAlert('리스트를 불러오지 못했습니다.\n잠시후 다시 해주세요.');
					}
					,loadComplete : function(data) {
						
	 					/*그리드 외부 페이지 처리*/
	/*					$('#' + twbPageId).html('');
						$('#' + twbPageId).html('<ul id="page_'+twbPageId+'" class="pagination-sm"></ul>');
						$('#page_' + twbPageId).twbsPagination({
							totalPages : data.total
							,visiblePages : '${gridPageSize}'
							,href : '#page={{number}}'
							,first : '<spring:message code="common.page.first" />'
							,prev : '<spring:message code="common.page.prev" />'
							,next : '<spring:message code="common.page.next" />'
							,last : '<spring:message code="common.page.last" />'
							,onPageClick : function(event, page) {
								jqGrid.jqGrid('setGridParam',{
									url : listURL + '&page=' + page + searchParam.get()
								}).trigger('reloadGrid');
								}
						}); */
						
						if (data.records == 0) {
							
						} else {
							/* 행선택 처리*/
							if (pk == "") {
								pk = jqGrid.find('tbody tr').eq(1).attr('id');
							}
							jqGrid.jqGrid('setSelection', pk);//행 선택
						}
						
						/* iframe 다시 그린다. */
						BaseContentResize();
					}
					/*행선택*/
					,onSelectRow : function(rowid, selected) {
						pk = rowid;//pk 값 바인딩
						if (rowid) {
							//viewForm(rowid);
						} else {
							BaseAlert('행을 선택해주세요.')
						}
					}
					,ondblClickRow : function (rowid) {
						infoForm(rowid);
					}

				});
	/* 			jqGrid.navGrid(jqGridPage,{
					refresh : true,
					edit : false,
					add : false,
					del : false,
					search : false,
					view : false,
					position : "left",
					cloneToTop : false
				}).jqGrid('bindKeys'); */			
				
				BaseContentResize();
			
			/*  */
			
		}

이제 다른 탭을 눌렀을 때 그리드가 다시 그려져야하는데 나는 url 만 바꾸면 될지 알고 탭을 클릭할 때마다 url 을 달리하여 docGrid 를 실행시켜주려 하였다. 하지만 함수는 타는데 그리드가 새로 실행되지 않고 중간에 끊어지는 현상이 발생되었다. 그래서 다른 것을 참고하였다.

// 새로 넣을 url을 적어준다.
initListURL = '${ctx}/grp/approval/myApproval/listDrafted.json?&from_date=${from_date}&to_date=${toDay}&sttus_cd=Y';
// 그리고 아래 코드를 실행하면 새로운 값을 받아온 그리드가 그대로 생성된다.
jqGrid.jqGrid('setGridParam', {
    url : initListURL
}).trigger('reloadGrid');

예시)

function SubmitGrid(){
    initListURL = '${ctx}/grp/approval/myApproval/listDrafted.json?&from_date=${from_date}&to_date=${toDay}&sttus_cd=Y';
    jqGrid.jqGrid('setGridParam', {
        url : initListURL
    }).trigger('reloadGrid');
}
function ApprovalGrid(){
    initListURL = '${ctx}/grp/approval/myApproval/listCurrent.json?';
    jqGrid.jqGrid('setGridParam', {
        url : initListURL
    }).trigger('reloadGrid');
}
function ComplateGrid(){
    initListURL = '${ctx}/grp/approval/myApproval/listApproved.json?&from_date=${from_date}&to_date=${toDay}&sttus_cd=Y';
    jqGrid.jqGrid('setGridParam', {
        url : initListURL
    }).trigger('reloadGrid');
}
function ReceivedGrid(){
    initListURL = '${ctx}/grp/transmit/mydocument/listReceive.json?&from_date=${from_date}&to_date=${toDay}&recv_yn=A';
    jqGrid.jqGrid('setGridParam', {
        url : initListURL
    }).trigger('reloadGrid');
}

이렇게 하면 새로운 탭 클릭시 리스트가 변경되어 잘 나오게 된다.