저번 포스팅에 이은 jqgrid를 알아보자. 이번에는 그리드에 행을 추가하고 삭제하는 방법에 대해서 볼것이다.
jqgrid를 처음 띄우는 것 부터 보고 싶다면 밑의 포스팅을 참고하기 바란다.
http://pjh3749.tistory.com/154
자 이런식으로 탭을 만들어줄건데 이거만드는 것은 너무 쉬우므로 넘어가겠다.
라고 하지만 코드를 본다면
1 2 3 4 5 | <span><a href="#" onclick="javascript:jqgridTable.dataSearch();">조회</a></span> <span><a href="#" onclick="javascript:gridFunc.addRow();">행추가</a></span> <span><a href="#" onclick="javascript:jqgridTable.saveData();">저장</a></span> <span><a href="#" onclick="javascript:gridFunc.clearGrid();">초기화</a></span> <span><a href="#" onclick="javascript:jqgridTable.deleteData();">삭제</a></span> | cs |
이렇게 만들어주고 클릭시 스크립트의 함수를 타게 되어 있다.
행추가부터 만들어보자. 행추가는 그리드에서 조회한 데이터들의 밑에 새로운 row를 추가하는 것이다.
gridFunc의 addRow()를 타므로 똑같이 만들어 준다.
1 2 3 4 5 6 7 8 9 10 11 12 | var gridFunc = { addRow : function() { var totCnt = $("#jqGrid").getGridParam("records"); var addData = {"seq": "", "name": "", "phone" : "", "address" : "", "etcc" : "", "gender" : "1"}; $("#jqGrid").addRowData(totCnt+1, addData); $("#jqGrid").setColProp("name", {editable: true}); } } |
addRow함수를 만들어 준다.
totCnt는 그리드안의 총 카운트를 쳐주는데 getGridParam이라는 함수를 사용한다.
getGridParam("records")
리턴타입 : int
특징 : getter 메서드만 제공되며, 서버에 요청하여 리턴 받은 실제 레코드 수 이므로 사용자가 임의로 설정할 수 없다.
addData는 jqGrid헤더에 있는 값 (DB 칼럼명) 이다. 똑같이 맞춰준다. 해당 값은 직접입력이므로 "" 빈 문자열을 넣어준다. 성별은 기본 1로 넣어준다.
addRowData는 row한줄을 추가하는 것이다. 첫 번째 파라미터 인자는 당연히 총 카운트에 1을 더해야한다. 바로 밑에 추가해야 하기 때문이다. 두 번째 인자는 딱 보면 알다사피 아까 만든 addData가 들어간다.
setColProp은 속성을 설정해주는 것이다. "name"은 아까 헤더쪽에 name탭을 의미한다. 그것의 속성 {editable : true} 즉, 편집가능하게 만드는 것이다.
이것을 추가하고 한가지를 더 해주어야 한다. 첫 포스팅에서 jqgrid의 초기화 관련된 부분을 넣었을 것이다. 거기에 셀을 편집할 수 있다는 속성을 넣어야 한다.
실행한 모습이다.
저렇게 이름탭을 수정가능하게 할 수 있다.
하지만 저렇게 한다면 원래 불러왔던 값도 수정할 수 있으므로 원래 값들은 수정하지 못하게하고 새로 행추가 한 row들만 편집가능하게 하고 싶다.
그렇다면 jqgrid 테이블 init에서 속성을 또 추가해야 한다.
cellsubmit 속성을 추가한다.
cellsubmit은 clientArray와 remote 두 가지 속성이 존재한다.
jqgrid공식 홈피에서 발췌하였다.
아까 설정했던 cellEdit도 한 번 읽어보길 바란다.
| Property | Type | Description | Default |
|---|---|---|---|
| cellEdit | boolean | Enables (disables) cell editing. When this option is set to true, onSelectRow event can not be used, and hovering is disabled (when mouseover on the rows). | false |
| cellsubmit | string | Determines where the contents of the cell are saved - can have two values: 'remote' or 'clientArray'. If remote the content of the cell if anything is changed is immediately saved to the server using the cellurl property, via ajax. The rowid and the cell content are added to the url by default. If you have the “mtype” setting set to post, the key value pears will be send as post variables. For example, if we save the cell named mycell,{id: rowid, mycell: cellvalue} is added to the url. If cellsubmit is 'clientArray', no ajax request is made and the content of the changed cell can be obtained via the method getChangedCells or thru a event. | remote |
| cellurl | string | the url where the cell is to be saved. You need to set this only when you use cellsubmit as 'remote'. | null |
| ajaxCellOptions | object | This option allow to set global ajax settings for the cell editiing when we save the data to the server. Note that with this option is possible to overwrite all current ajax setting in the save request including the complete event. | empty object |
cellsubmit은 두 가지 속성 'remote'와 'clientArray'가 있는데 remote는 저장하는 순간 cellurl로 ajax를 타고 간다. cellurl속성도 밑에 있다. 일반 ajax와 타는 방식은 같다. 하지만 clientArray로 속성을 주게 되면 ajax를 타지 않고 어떤 다른 이벤트 (클릭해서 저장같은) 를 통해서 데이터를 처리해줘야한다. 즉, 바로 ajax태우지 않을 것이라는 것이다.
clientArray를 주었을 때 처리할 로직을 작성해야한다.. 여기서 onSelectCell을 쓸 것이다. 아까 cellsubmit속성 밑에다가 넣어주자.
1 2 3 4 5 6 7 8 9 10 11 12 | onCellSelect : function(rowId, colId, val, e) { // e의 의미는 무엇인가요? var seq = $("#jqGrid").getCell(rowId, "seq"); if(colId == 2) { if(CommonJsUtil.isEmpty(seq)) { $("#jqGrid").setColProp('name', {editable:true}); } else { $("#jqGrid").setColProp('name', {editable:false}); } } }, | cs |
1 2 3 4 5 6 7 8 9 10 11 | {name:'gender', index:'gender', width:100, editable:true, edittype: "select", formatter: "select", editoptions : { value : {"1":"남자", "2":"여자"}, dataEvents : [{ type : 'change', fn : function(e) { } }] } }, | cs |
1 2 3 4 5 6 7 8 | rowBtn : function(cellvalue, options, rowObject){ if(rowObject.seq ==""){ return '<a href="javascript:gridFunc.delRow('+options.rowId+');"> 행삭제 </a>'; }else { return ""; } }, | cs |
formatter함수의 정의는 jqgrid 홈페이지에서 발췌하였다.
To the custom formatter are passed the following parameters:
function myformatter ( cellvalue, options, rowObject ) { // format the cellvalue to new format return new_formated_cellvalue; }
- cellvalue - is the value to be formatted
- options - is an object containing the following element
- options : { rowId: rid, colModel: cm} where rowId - is the id of the row colModel is the object of the properties for this column getted from colModel array of jqGrid
- rowObject - is a row data represented in the format determined from datatype option. If we have datatype: xml/xmlstring - the rowObject is xml node,provided according to the rules from xmlReader If we have datatype: json/jsonstring - the rowObject is array, provided according to the rules from jsonReader
1 2 3 4 5 6 7 8 | delRow : function(rowid) { if(rowid != "") { $("#jqGrid").delRowData(rowid); } }, clearGrid : function() { $("#jqGrid").clearGridData(); } | cs |
'프로그래밍 > 전자정부프레임워크(eGov)' 카테고리의 다른 글
| JQGrid 전자정부프레임워크에 적용하기 - (3) (1) | 2017.03.26 |
|---|---|
| JQGrid 전자정부프레임워크에 적용하기 - (1) (1) | 2017.03.19 |
| 스프링 쿠키의 활용법 (0) | 2017.03.13 |
| 스프링 게시판 페이징 구현하기 - (1) (0) | 2017.03.12 |
| 부트스트랩 테이블과 동적 JSTL 조지기 - (2) (0) | 2017.03.05 |