개발/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 로 선언해주면 된다.