메뉴 건너뛰기

조회 수 2285 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

다운받은 jqgrid  라이브러리를 풀어서 

 

아래와 같이 jsp 에 포함해준다.

 

jqgrid 는 jquery-ui 도 사용하기 때문에 같이 다운받아서 같이 참조되도록 한다

 

그리고 당연히 jquery 라이브러리도 필요하겠지..

 

locale-kr 은 jqgrid 에서 사용되는 언어팩 , 

 

라이브러리안에 다양한 언어팩들이 있는데.. 보통 kr , en 정도 사용하겠지..

 

 

<link rel="stylesheet" type="text/css" media="screen" href="../css/jquery-ui.css" />

<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" />

<script src="../js/jquery-1.11.0.min.js"       type="text/javascript"></script>

<script src="../js/grid.locale-kr.js"            type="text/javascript"></script>

<script src="../js/jquery.jqGrid.min.js"       type="text/javascript"></script>

 
 
 
 
# grid 그리는 script
 
var $grid1;
 
$(document).ready(function () {
grid();
}); // ready end
 
 
// grid 초기화 및 설정
function grid() {
$grid1 = $("#grid").jqGrid({
  url: '../json/data.json',
datatype: "json",
mtype: 'POST',  
editurl: 'clientArray',
 
colModel: [
 
{ label: '키값' , name: 'pk' , width: 75 , key : true , hidden: true
},
{ label: '처리구분' , name: 'processType' , width: 75 
},
    { label: '종류'     , name: 'kind' , width: 75 
},
{ label: '1' , name: 'error1' , width: 75 
, editable:true, edittype: 'text', editrules : { required: true }
},
{ label: '2' , name: 'error2' , width: 75 
, editable:true, edittype: 'text', editrules : { required: true }
// 값에 따른 속성값 지정하기
                    // 값이 CL1이면 스타일을 바꾸도록 설정하기 
                            // cellattr 의 리턴값으로 사용자가 지정하고 싶은 스타일을 넘기면 된다.
                            // crome , ie9 이상에서 가능 ie9 에서 호환성 보기로 했는데 먹히지 않았다... 
, cellattr: function ( rowId , tv , rowObject , cm , rdata ) { 
if ( rowObject.error2 == "CL1" ) { return 'style="text-align:center;color:red;background: #000000;"' }
}
},
{ label: '3' , name: 'error3' , width: 75
, editable:true, edittype: 'text', editrules : { required: true }
}
],
width: $("#jqgrid").width(),
                   height: 650,
rowNum: 10, // 한페이지에 보여줄 데이터 수
rowList: [ 5, 10, 20, 50], // 페이징 옵션
rownumbers: true, // show row numbers
rownumWidth: 25, // the width of the row numbers columns
cellEdit: true, // true 시 틀고정 ( frozen column 기능 불가 )
cellsubmit:'remote',
cellurl:'../json/cellEdit.jsp', // 셀 수정 후 submit url
 
beforeSubmitCell : function(rowid, cellName, cellValue) {   // submit 전
console.log(  "@@@@@@ rowid = " +rowid + " , cellName = " + cellName + " , cellValue = " + cellValue );
//return {"id":rowid, "cellName":cellName, "cellValue": cellValue}
},
 
afterSubmitCell : function(res) {    // 변경 후
var aResult = $.parseJSON(res.responseText);
var userMsg = "데이터가 변경되었습니다.";
if((aResult.msg != "success")) {
userMsg = "데이터 변경에 실패하였습니다.";
}
 
return [(aResult.msg == "success") ? true : false, userMsg]; // 실패했을때만 다이얼로그 띄움
},
 
//onSelectRow: selRow,
sortorder: 'desc',
caption:"그리드명",
loadonce:false, // true 하면 리로딩이 안됨 false
viewrecords: true,
loadonce : true,
pager: "#gridpager"
});
 
 
             // 그리드 헤드 셀 병합하기 
$grid1 = $('#grid').jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[
     {startColumnName: 'processType' , numberOfColumns: 2, titleText: '구분'},
       {startColumnName: 'error1' , numberOfColumns: 3, titleText: '결함 코드'}
]
});
 
 
}
 
 
// 리로딩 처리
function reload() {
jQuery("#grid").trigger('reloadGrid');
 
// 파라미터 넘길때..
/*
jQuery("#grid").setGridParam({ "page": 1 });
jQuery("#grid").setGridParam({
"postData" : { param1 : "1" , param2  "2" }
}).trigger("reloadGrid");
*/
}
 
 
# html 
<div id="jqgrid" style="width:100%;">
    <table id="grid"></table>
    <div id="gridpager"></div>
</div>
 
 
그러면 이런 형태의 그리드가 그려짐
 
 
 
 
 
 
 
# json 데이터 포맷 - data.json
 
{
  • rows
     
    [
    •  
      {
      • pk"ID1",
      • processType"타입",
      • kind1001,
      • error1"OT1",
      • error2"CL1",
      • error3"DF2"

      },

      {

      • pk"ID2",
      • processType"타입",
      • kind1002,
      • error1"OT2",
      • error2"CL2",
      • error3"DF4"

      },

    • .

    • .

    • .

    • ]

    • }

 
 
 
 
 
loadonce 속성
     loadonce : true 시 그리드 데이터를 한번만 로딩한다는 의미이기때문에 리로딩 명령 ( jQuery("#grid").trigger('reloadGrid'); 이 작동되지 않는다.
        loadonce : false 시 여러번 로드 가능 단, json 데이터에 페이징 관련 데이터를 세팅해줘야 함
         - rows 와 같은 레벨에 total : 총페이지수 , records : 총 row  수 등을 추가해줘야 페이지처리 부분이 제대로 작동한다.
{
   total:4,
   records : 35,
  • rows
     
    [
    •  
      {
      • pk"ID1",
      • processType"타입",
      • kind1001,
      • error1"OT1",
      • error2"CL1",
      • error3"DF2"

      },

   
 
 
그리드에서 수정모드 전환
 
  - 셀 값 하나씩 수정할때
       cellEdit : true, // true 시 틀고정 ( frozen column 기능 불가 ) 
        cellsubmit :'remote', 
        cellurl :'../json/result.json',  // 셀 수정 후 submit url 
         beforeSubmitCell : function(rowid, cellName, cellValue) {
           // submit 전 
           if ( cellName == "error3" ) { // validation check 
                  //alert( "유효하지 않는 값입니다." ); 
                  return {}; 
             } 
         }, 
         afterSubmitCell : function(res) { 
         // 변경 후 
         var aResult = $.parseJSON(res.responseText); 
         var userMsg = "데이터가 변경되었습니다."; 
          if((aResult.msg != "success")) { 
               userMsg = "데이터 변경에 실패하였습니다."; 
          } 
          return [(aResult.msg == "success") ? true : false, userMsg]; // 실패했을때만 다이얼로그 띄움 
         },
 
 
  - 수정된 셀 값 한번에 수정하기 
     cellEdit   : false,
     cellsubmit :'clientArray',  
 
// 수정내용 저장
function saveEdit() {
var ret = $("#grid").getChangedCells('dirty');    // 수정된 행들을 Object배열로 받아온다.
//console.log( ret );  // 수정된 행에 관한 정보만 넘겨준다. key 값을 id 에 넣어주고 수정된 컬럼의 이름과 변경된 값을 리턴한다. 수정되지 않은 정보는 넘기지 않는다.
var len = ret.length;
// validation check
for ( var i=0; i < len ; ++i ) {
 
                       try {
var data = ret[i].COL_NAME;
 
if ( data.length > 50 ) {
var list = jQuery('#grid').jqGrid ('getRowData', ret[i].id );
alert( "...은 50자 이하로 입력하세요. (   " + list.KEY_NAME + ") " );
return;
}
} catch(e) {}
                :
                :
         }
 
     // 수정모드 전환
function edit() {
$grid1.jqGrid('setGridParam', {cellEdit: true});
}
// 수정모드 취소
function cancelEdit() {
curPage = $grid1.jqGrid('getGridParam' , "page" );
$grid1.setGridParam({ "page": curPage });
$grid1.jqGrid('setGridParam', {cellEdit: false});
$grid1.trigger('reloadGrid');
}
 
 
 
그리드에서 날짜 수정시 datepicker 사용하기 
     사용시 jquery-ui.js 를 선언해줘야한다.
 
     <script src="/js/jquery-ui.js" type="text/javascript"></script>
      ex ) 
{ label: '시작일' , name: 'S_DATE' , width: 20 , align: "center" , sortable:false 
, editable:true, edittype: 'text', editrules : { required: true }
, editoptions: {
  readonly: 'readonly',
                          size: 10
                                                  maxlengh: 10,
                          dataInit: function(element) {
                             $(element).datepicker({ dateFormat: 'yy-mm-dd', constrainInput: false }); // , showOn: 'button', buttonText: 'calendar'
                          }
                 }
 
},
 
 
 
 
 
# 정렬하기 기능 추가 ( 그리드 헤더를 클릭하면 정렬된다 )
colModel 의 컬럼속성에서 sortable:true 를 추가하면 된다
 
서버단에서는 
파라미터 ( sidx ,  sord ) 값을 가지고 쿼리에 order by 를 추가해주면 된다.
sidx 는 컬럼명이고 sord 는 오름차순 ( ASC ) , 내림차순 ( DESC ) 속성이다
 
 
 
# 그리드에 체크박스 넣기
다중 선택를 원할때는 multiselect: true 로 여러가지가 선택가능하도록 할수 있다
여러행을 삭제할때 유용하게 사용가능하다
 
 
 
# 가로스크롤 생기는 옵션 ( 그리드의 컬렁이 많아서 화면 이상 나와야 할때 이 속성을 사용한다. )
shrinkToFit : false 
그리고 colModel 의 셀속성에서 width 를 지정해주면 된다
그러면 비율로 증가하는것이 아니라 지정한 width 로 세팅된다
 
 
 
# 행 추가하기 
addRowData 을 이용하여 행을 추가한다.
아래의 "addRow" 는 추가한 행의 id 로 넘어오는 값이다.
그리고 옆의 json 데이터 형태는 추가되는 행에 세팅되는 값인데 default 값이 있다면 값을 세팅해서 넣어주면 된다
 
var cnt = 1; 
function add() {
$("#grid").addRowData( "addRow" + (cnt++) 
     , { "WORK_NAME" : "" , "S_DATE" : "" , "E_DATE" : "" , "BUDGET" : "" } );
}
 
 
추가를 하고 값을 저장할때 데이터 형태
 
var re = $("#grid").getChangedCells('dirty');
 
re =>
[ { id : "addRow" , "WORK_NAME" : "~~" , "S_DATE" : "2016-01-01" }
, { id : "addRow" , "WORK_NAME" : "~~" , "S_DATE" : "2016-01-01" }
]
 
 
 
# 속성변경
$("#grid").setColProp( "컬럼명" , { editable : true } );
 
 
 
# 셀 선택시 이벤트 
onCellSelect: function (rowId, iCol, content, event) {
//이벤트처리
},
 
 
# 셀속성 - textarea 
, editable     : true , edittype: 'textarea'
, editoptions  : { maxlength: 1024 , rows : 5}
 
 
# 셀 속성 - number 및 커스텀 함수 사용법
, editable     : true , edittype: 'text'
, editrules    : { number   : true , maxValue : 8
     , custom: true 
                  , custom_func: function (value, colName) {
return checkSum(value, colName , 'T1' );
    }
}
 
// 커스텀 함수 처리시 return 방식
function checkSum(value, colName , gName) {
var re = true;
    ....
 
return [re , "... 수 없습니다."]; // return [false , "에러메세지"];
}
커스텀 함수 사용시 리턴타입은 지켜줘야한다.
 
 
 
# 틀고정 
jqgrid demo 페이지의 frozen cols.group 참고
 
colModel : [
   {name: 'A' , index: 'A' , width:100  frozen : true , align: "center" }
,   {name: 'B' , index: 'B'    , width:200  , frozen : true}
,   {name: 'C' , index: 'C'    , width:200 }
:
:
]
 
$("#grid").jqGrid('setFrozenColumns');
 
A,B 컬럼은 고정이고 C 컬럼부터 스크롤된다
 
 
 
 
 
 
# 콤보박스 넣기
 
 
 
 
 
 
 
....
 
 
 

List of Articles
번호 제목 날짜 조회 수
227 opener 값전달, 함수실행.(자식창에서 부모창으로 값전달, 함수실행) 2021.03.26 1437
226 getYear(); 크롬, 파이어폭스 에서 제대로 작동 안하는 문제 2021.03.26 197
225 DTREE 트리구조 만들기 file 2021.03.26 851
224 페이지 이동 2021.03.26 190
223 default 매개변수(매개변수 기본값) 2021.03.26 199
222 자바스크립트에서 이벤트 중단 하는 방법 2021.03.25 319
221 현재 날짜, 시간 ( Month + 1 에 대해서 ) 2021.03.25 218
220 오브젝트 속성 2021.03.25 237
» jqgrid 이용한 그리드 활용하기 file 2021.03.25 2285
218 HTML, Javscript - 선택한 색상으로 배경색 바꾸기(pallet 만들기) file 2021.03.09 710
217 Javascript - 입력받은 숫자를 순서대로 홀짝 별로 배열에 삽입하기 2021.03.09 302
216 Javascript - Free SVG 한국맵 제어 처리 file 2021.03.09 864
215 Javascript - form태그 내부 ajax처리시 2번 전송되는 현상 2021.03.09 266
214 javascript - vanillaJS로 체크박스(checkbox) 제어하기 file 2021.03.09 472
213 Javascript - 유효성 체크(이메일 정규식, IP 정규식, 비밀번호 등) 2021.03.09 718
212 Javascript - 사업자 등록번호 유효성 체크 file 2021.03.09 1088
211 Javascript - Calendar 달력 생성하고 제어하기 2021.03.09 511
210 Javascript - 입력한 년, 월의 마지막 날짜 구하기 2021.03.09 219
209 Javascript - 화면 캡처 후 서버에 저장하기(html2canvas 사용법, 주의사항) file 2021.03.09 2121
208 Javascript - 이미지 미리보기 회전되어 나옴(EXIF) file 2021.03.09 36157
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved