개발/Javascript & jQuery

[jqGrid] 그리드 내 행마다 수정/삭제 버튼 삽입하기

서도롱 2019. 1. 24. 12:24

jqGrid를 쓰다보면 언젠가 아래 이미지처럼 그리드의 행마다 수정 삭제 버튼을 넣어줘야 하는 경우가 생길 수도 있다.




출처는 요 아래

http://trirand.com/blog/jqgrid/jqgrid.html  → Functionality > Formatter actions

http://www.guriddo.net/documentation/guriddo/javascript/user-guide/formatters/



실제 소스에 적용한다면 이런 느낌으로 들어간다.


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
    $$("#list").jqGrid({
        url: "url",
        datatype : "json",
        mtype: "post",
        colNames:[ ' ''id','name','active','date' ],
        colModel:[
           { name:'myac', width: 50, fixed:true, sortable : false, formatter:'actions', formatoptions:{keys:true, delbutton:false}},
           { name:"id", width: 60, align:'center', editable : true  },
           { name:"name", width: 120, align:'center', editable : true'editoptions':{'size':100}},
           { name:"active", width: 30, align:'center', editable : true },
           { name:"date", width: 30, align:'center', editable : true}
        ],
        autowidth: true,
        width : pageWidth,
        height: "auto",
        rownumbers: true,               
        rownumWidth: 30,               
        gridview: true,                 
        onSelectRow: function(rowId){
             if(rowId != null) {
                
            }
        },
        ondblClickRow : function(rowid, iRow, iCol, e){
            $("#list").jqGrid('editRow', rowid, {keys: true});
        },
        loadComplete : function(){
            
        }
    }).navGrid();
cs



이 소스에서 아래에 따로 빼놓은 요기가 바로 버튼을 그려주는 부분


1
2
3
colModel:[
    { name'myac', width: 50, fixed:true, sortable : false, formatter:'actions', formatoptions:{keys:true, delbutton:false}},
                    
cs


나는 행 삭제 없이 수정만 가능하도록 하고 싶어서 formatoptions 에서 delbutton:false 로 선언했는데, 

마찬가지로 수정 버튼을 안 보이게 하고 싶으면 editbutton:false 로 선언해주면 된다.