JQGRID 메모

function makeTable() {
    $("#table_modal").jqGrid({
        datatype: "local",
        height : 350,
        width: 630,
        colNames: ['key','원인코드','사유명'],
        colModel: [
            {name: 'key', index: 'key',key:true, align: 'right',hidden:true},
            {name: 'reason_code', index: 'reason_code', align: 'right',editable :true},
            {name: 'reason_name', index: 'reason_name', align: 'right',editable :true},
        ],
        caption: "모달 작업창",
        multiselect : true,
        rowNum: 99999,
        rownumbers: true,
        pager: "pager",
        cellEdit: true,
        cellsubmit:'clientArray',
        afterEditCell:function(rowid, cellname, value, iRow, iCol){
            $("#"+rowid+"_"+cellname).blur(function(){
                $("#table_modal").jqGrid("saveCell",iRow,iCol);
            });
        },
        jsonReader : {
            id: "key"
        }

    });
}

• datatype : 데이터 소스 유형을 나타냅니다. 현재는 로컬 데이터를 사용하므로 local로 설정됩니다.
• height : 그리드의 높이를 설정합니다.
• width : 그리드의 너비를 설정합니다.
• colNames : 각 열의 제목입니다. 순서대로 나열합니다.
• colModel : 그리드의 각 열의 속성을 정의합니다. name은 필드 이름, index는 열의 인덱스, align은 셀 내용의 수평 정렬, editable은 셀이 편집 가능한지 여부를 지정합니다.
• caption : 그리드의 제목입니다.
• multiselect : 다중 선택이 가능한지 여부를 설정합니다.
• rowNum : 그리드에 표시되는 행의 수를 설정합니다.
• rownumbers : 각 행의 번호를 표시할지 여부를 설정합니다.
• pager : 페이징을 구현할 때 사용하는 HTML 요소의 ID를 지정합니다.
• cellEdit : 셀을 편집할 수 있는지 여부를 설정합니다.
• cellsubmit : 셀을 편집한 후 서버에 데이터를 전송하는 방법을 설정합니다.
• afterEditCell : 셀을 편집한 후 셀을 저장하도록 지정합니다.
• jsonReader : 데이터를 읽는 데 사용되는 JSON 데이터의 형식을 지정합니다. id 속성은 행 식별자를 지정합니다.

---

datatype은 jqGrid에서 데이터 소스 유형을 지정하는 옵션입니다.
jqGrid에서는 다양한 데이터 소스 유형을 지원하며, datatype 옵션을 통해 데이터 소스 유형을 설정할 수 있습니다.

다음은 jqGrid에서 지원하는 datatype의 유형입니다.

• xml : XML 형식의 데이터 소스를 지정합니다.
• json : JSON 형식의 데이터 소스를 지정합니다.
• local : 클라이언트 측에서 직접 데이터를 입력하여 사용할 수 있는 옵션입니다.
• jsonp : JSONP 형식의 데이터 소스를 지정합니다.
• script : 외부 스크립트 파일을 불러와 데이터 소스를 지정합니다.
• xmlstring : XML 문자열 형식의 데이터 소스를 지정합니다.
• jsonstring : JSON 문자열 형식의 데이터 소스를 지정합니다.
• csv : CSV 형식의 데이터 소스를 지정합니다.
• jsonxml : XML 형식의 데이터를 JSON 형식으로 변환하여 사용할 수 있는 옵션입니다.
• function : 사용자 정의 함수를 통해 데이터를 지정합니다.

local 데이터 유형은 클라이언트 측에서 직접 데이터를 입력하여 사용하는 옵션입니다.
이 옵션을 사용하면 서버에서 데이터를 가져오지 않고 클라이언트에서 데이터를 로딩할 수 있습니다.
datatype을 local로 설정하면, data 옵션에 데이터 배열을 직접 입력해줘야합니다.
이 때 data 옵션에 입력된 데이터 배열은 클라이언트 측에서만 사용됩니다.
따라서 local 데이터 유형을 사용할 경우, 데이터베이스와의 연동이 필요한 경우가 아니라면 성능을 향상시킬 수 있습니다.

 

 

function check() {
    $("#jqGrid").setGridParam({
        url: "get_reason_sub_list",
        postData: {searchType:$("#search_things").val()},
        datatype: "json",
        mtype: "post"
    }).trigger('reloadGrid');



}

CREATE PROCEDURE dbo.SP_KDW_REASON_GET
@SEARCHTYPE			VARCHAR(20)
AS 
BEGIN
		SELECT * 
			FROM SYS_REASON_SUB_CD 
			LEFT JOIN SYS_REASON_CD ON SYS_REASON_SUB_CD.REASON_CODE = SYS_REASON_CD.REASON_CODE 
			
				WHERE SYS_REASON_SUB_CD.REASON_CODE LIKE '%' + @SEARCHTYPE + '%' 
	
END

해당 코드는 클라이언트 측에서 사용자가 선택한 검색 조건($("#search_things").val())을 서버 측으로 전달하여,

SEARCHTYPE 매개변수를 활용하여 SYS_REASON_SUB_CD와 SYS_REASON_CD 두 개의 테이블을 조인하고,

REASON_CODE 필드의 값이 SEARCHTYPE을 포함하는 모든 행을 선택하여 반환합니다. 이 결과를 클라이언트 측으로 전달받아 jqGrid를 통해 화면에 출력합니다.

조회된 데이터는 JSON 형태로 반환되며, 이를 jqGrid에 적용하여 그리드 형태로 출력합니다. setGridParam 함수를 사용하여 jqGrid의 속성을 변경하고, trigger 함수를 사용하여 변경된 속성을 적용합니다.

그리고 jqGrid는 그리드 내에서 특정 행 또는 열을 선택하거나 수정하는 기능을 제공하는데,
이를 위해 multiselect, cellEdit, cellsubmit 등의 속성을 설정하여 그리드 동작을 제어하고 있습니다.
이를 통해 사용자가 그리드 내에서 직접 데이터를 편집하고, 변경 내용을 서버로 전송하여 데이터를 업데이트할 수 있습니다.

 

 

---

function modal_make1() {

    $("#dialog1").dialog({
        modal: true,
        width: 1000,
        height: 1000,
        resizeable: true,
        autoOpen: false,
        autosize: false,
        show: 'slide',
        cellEdit : true,
        buttons: {
            "취소": function () {
                $("#table_modal").jqGrid('clearGridData',true);
                $("#dialog1").jqGrid('clearGridData',true);
                $(this).dialog("close"); //dialog 닫기 메소드 실행

            },
            "저장": function () {
                aa();

                // save();
            }
        }

    });
}

위 코드는 jQuery UI의 Dialog 위젯을 사용하여 모달 대화상자를 만드는 함수입니다.

1. modal: true - 다이얼로그가 모달(뒷 배경 클릭 불가)로 작동하도록 설정합니다.
2. width: 1000, height: 1000 - 다이얼로그의 너비와 높이를 각각 1000으로 설정합니다.
3. resizeable: true - 다이얼로그의 크기를 조절할 수 있도록 설정합니다.
4. autoOpen: false - 페이지가 로드될 때 자동으로 다이얼로그를 열지 않도록 설정합니다.
5. autosize: false - 다이얼로그의 크기가 내용에 따라 자동으로 조절되지 않도록 설정합니다.
6. show: 'slide' - 다이얼로그가 열릴 때 슬라이드 애니메이션을 적용합니다.
7. cellEdit : true - jqGrid 셀을 편집 가능한 상태로 만듭니다.
8. buttons - 다이얼로그 하단에 버튼을 추가합니다. 여기서는 '취소' 버튼과 '저장' 버튼을 추가합니다.
   • "취소": 클릭하면, $("#table_modal").jqGrid('clearGridData',true);,
     $("#dialog1").jqGrid('clearGridData',true); 를 사용하여 모달창의 jqGrid 데이터를 모두 초기화하고 모달 대화상자를 닫습니다.
   • "저장": 클릭하면, aa() 함수를 실행합니다.

따라서 이 함수는 너비, 높이, 버튼 등의 설정을 포함하여 모달 대화상자를 생성하고 셀을 편집 가능한 상태로 만드는 등의 다양한 기능을 제공합니다.