[jqgrid] jqgrid 고도화 / jqgrid 효율적으로 선언하기

 

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.Date" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:import url="/common/leftHeader.do?link=common/leftHeader" />

<style>
</style>

<%-- javascript 는 Header에 작성한다. --%>
<script type="text/javascript">

    //---------------------------------------------------------------------------------------
	//document.ready 위에 이벤트 할당한 후 호출하여 사용하거나  document.ready 안에 할당하세요.
    이벤트 할당 ex) // document.ready 위에 (예:_initEvent) 함수를 작성하여 document.ready 안에서 (예:_initEvent) 함수를 호출하여 사용하는 예시
	var _initEvent = function(){
	
	    $("#aaa").on("click",function(){
		alert(1);
		}

		$("#bbb").on("click",function(){
		var aaa = "sample";
		console.log(aaa);
		}

		$("#searchBtn").on("click", function(){
            var sSdate   = $("#sDate").val();
            var sTeamNm  = $("#teamNm").val();
            var param = {sDate : sSdate, teamNm : sTeamNm};
            fn_search('list','url', param);
        });

		$('#delBtn').on('click', function(e) {
            fn_deleteConfirmMessage('fnDelete');
        });
	}

    //---------------------------------------------------------------------------------------
	// document.ready 안에서 호출하여 사용할 함수를 작성하세요.
	function _sample(){
	    alert(1);
	}

    //---------------------------------------------------------------------------------------
	그리드 초기화 ex) // document.ready 위에 (예:_initGrid) 함수를 작성하여 document.ready 안에서 (예:_initGrid) 함수를 호출하여 사용하세요.
	               // _initGrid 안에 그리드를 다 작성하세요.
				   // 그리드 헤더(colNames)를 배열로 만들어 가독성 좋게 작성하세요.
				   // 그리드 옵션은 필요한것만 사용하세요.
				   // url : index.html 같은 필요 없는 요청은 보내지 마세요.

    var _initGrid = function() {
		
		//상단 그리드 헤더그리기 (colNames)
		var arrHeaderList = [];
        arrHeader.push("state");
        arrHeader.push("AAA");
        arrHeader.push("BBB");

		$("#list").jqGrid({
              datatype    : 'local'
             ,mtype       : "POST"
             ,loadtext    : "로딩중..."
             ,viewrecords : true
             ,colNames    : arrHeaderList
             ,colModel    : [
                             {name:'state',  index:'1',  editable:false, hidden: true}
                            ,{name:'aaa',    index:'2',  editable:false, hidden: true}
                            ,{name:'bbb',    index:'3',  editable:false, width:"10%", align:"center"}
							]
			 ,height      : 100
             ,autowidth   : true
             ,jsonReader  : {root:"row", records:"records", repeatitems:false, id:"id"}
             ,rowNum      : 100
		});
	    //url 없이 사용하려면 각각의 그리드마다 $('#그리드id값').jqGrid('setGridParam', { 'datatype' : 'json' }); 작성하여야 합니다.
		$('#list').jqGrid('setGridParam', { 'datatype' : 'json' });

        //상단 그리드 헤더그리기 (colNames)
		var arrHeaderList2 = [];
        arrHeader.push("state");
        arrHeader.push("CCC");
        arrHeader.push("DDD");

		//그리드 옵션은 필요한것만 사용하세요.
        // url : index.html 같은 필요 없는 요청은 보내지 마세요.
		$("#list2").jqGrid({
           ,datatype    : "local"
           ,loadtext    : "로딩중..."
           ,viewrecords : true
           ,colNames    : arrHeaderList2
           ,colModel    : [{name:'state', index:'1', editable:false, align: 'center', hidden:true}
                          ,{name:'ccc',   index:'2', editable:false, align: 'center', width:"15%"}
                          ,{name:'ddd',   index:'3', editable:false, align: 'left', width:"25%"}
                          ]
           ,height      : 200
           ,autowidth   : true
           ,jsonReader  : {root:"row", records:"records", repeatitems:false, id:"id"}
           ,rowNum      : 100
		});
		//url 없이 사용하려면 각각의 그리드마다 $('#그리드id값').jqGrid('setGridParam', { 'datatype' : 'json' }); 작성하여야 합니다.
	    $('#list2').jqGrid('setGridParam', { 'datatype' : 'json' });
	
	};

    //---------------------------------------------------------------------------------------
	***** DOM이 다 그려진후 document.ready가 실행됨. *****
    $(document).ready(function() {

	ex.날짜 셋팅하기) : fn_date_value("eDate");

	ex.이벤트할당) : _initEvent();

	ex.그리드초기화) : _initGrid();

	ex.화면이 열릴때 바로 조회하고 싶으면 trigger 함수를 사용합니다.) : $("#searchBtn").trigger("click");
	// #searchBtn 이벤트가 발생하여 그리드(id=list)를 조회한다.

	});

HTML 은 Body에 작성합니다.

<div>
    <div style="float:right">
        <button type="button" title="조회" class="btn" id="searchBtn">조회</button>
        <button type="button" title="삭제" class="btn" id="delBtn">삭제</button>
    </div>
	<div class="grid-area" style="width:100%;">
        <table id="list"></table>
    </div>
	<div class="grid-area" style="width:100%;">
        <table id="list2"></table>
    </div>
	<div style="float:left">
        <button type="button" title="조회" class="btn" id="aaa">aaa버튼</button>
        <button type="button" title="삭제" class="btn" id="bbb">bbb버튼</button>
    </div>
</div>