jqGrid dataType json CRUD + filterToolbar + dateRangePicker 6부 CUD 기능 구현
추천 그리드 ▼
Link : https://aljjabaegi.tistory.com/593
[VanilaJS Free Grid library] Aljjabaegi Grid Grand Open
[Free Grid library] Aljjabaegi Grid Grand Open 여러 무료 라이브러리를 사용해오다가 많은 요구사항에 맞추어 커스텀하기 어려워 직접 만든 그리드를 공개합니다. 페이징, 정렬, 단일조회, 복수조회,
aljjabaegi.tistory.com
어느덧 jqGrid 6번째 포스팅 입니다.
Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 1부 데이터 조회
Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 2부 페이징 설정
Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 3부 헤더 정렬
Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 4부 멀티 조건 조회
Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 5부 기간 조회 dateRangePicker설정
이번 포스팅에서는 이전에 R 을 제외한 CUD 기능을 적용해 보겠습니다.
소스는 이전 포스팅 소스를 참고하세요~
이번에는 추가부분만 작성하겠습니다.
jqGrid의 navGird를 활용할 껀데요. 페이지 div 좌측에 버튼이 추가되게 됩니다.
좌측부터 추가, 수정, 삭제, Refresh 버튼 입니다.
그럼 추가하는 방법을 보도록 하죠.
기존의 gridOption object에 아래의 옵션을 추가해주세요.(colM은 수정)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
editUrl : '${ctx}/udtCsr.do',
addUrl : '${ctx}/addCsr.do',
delUrl : '${ctx}/delCsr.do',
colM : [
{name:'csrTenant',align:'center',width:'50px',editable:true},
{name:'csrId', align:'center',width:'50px',editable:true,editoptions:{disabled:"disabled"}},
{name:'csrName', align:'center',width:'50px',editable:true},
{name:'csrDn', align:'center',width:'40px',editable:true},
{name:'csrPhone', align:'center',width:'50px',editable:true},
{name:'regDtm', align:'center',sorttype: 'date',
searchoptions : {
dataInit : function(elem){
$(elem).dateRangePicker({});
}
}
},
{name:'recentLoginTime', align:'center', sorttype:'date',
searchoptions : {
dataInit : function(elem){
$(elem).dateRangePicker({});
}
}
},
{name:'pwReset', align:'center', width:'25px',search:false},
],
|
cs |
editUrl, addUrl, delUrl 이 추가 되었고 colMoel에 수정할 값들에 editable : true가 추가되었습니다.
csrId는 키값이라 수정을 못하게 editoptions를 추가해 disabled 처리 했습니다.
다음 은 jqGridFunc.setGrid에 추가될 소스입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
grid.jqGrid('navGrid', '#'+gridOption.pager,
{
edit : true,
add : true,
del : true,
search : false,
},
{
url : gridOption.editUrl,
afterComplete:function(data) {
jqGridFunc.tableReload(data, '수정');
},
recreateForm: true,
closeAfterEdit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.resultMsg;
},
},
{
url : gridOption.addUrl,
beforeShowForm: function ($form) {
$form.find(".FormElement[disabled]").prop("disabled", false);
},
afterComplete:function(data) {
jqGridFunc.tableReload(data, '저장');
},
closeAfterAdd: true,
},
{
url : gridOption.delUrl,
afterComplete:function(data) {
jqGridFunc.tableReload(data, '삭제');
},
delData : {
csrId : function(){
var selId = $('#csrList').jqGrid('getGridParam', 'selrow');
var csrId = $('#csrList').jqGrid('getCell', selId, 'csrId');
return csrId.replace(/-9/,'');
}
}
}
)
|
cs |
기존의 소스에 grid.jqGid('filterToolbar', filterOption); 아래 위의 소스를 추가해 주세요 (2부 참고)
edit는 수정, add는 추가, del은 삭제 기능의 활성화 여부입니다.
이번 그리드는 filterOption을 추가하였기 때문에 search 기능은 false 처리 했습니다.
Object를 보시면 아시겠지만 첫 objec의 순서대로 다음 오브젝트가 옵션이됩니다.
(edit -> add -> del 순서)
del같은경우 좀 차이가 보이는데, 다른 기능들과 같이 설정을 하면 값이 넘어가지 않더라구요,
그래서 위와 같이 delData를 따로 설정해 주셔야 합니다.
신규 등록의 경우에도 앞에서 disabled true처리를 하였기 때문에 반대로 false를 해주셔야
신규 모달팝업 창에서도 disabled 옵션이 제거 됩니다.
[신규]
[수정]
[삭제]
이제 설정된 URL 로 해당 데이터가 파라메터로 전송이 됩니다.
서버단은 생략 하도록 하겠습니다.
질문이 있으시면 댓글로 남겨주세요~~
jqGrid에서는 행에서 바로 수정이 가능한 inlIne기능이 있습니다.
inline editing 에 대해서는 다음에 포스팅 하도록 하겠습니다.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing
댓글