jqGrid - 편집 모드 옵션(edittype, editoptions)

1. cellEdit 속성과 editable, edittype 옵션

그리드 셀에 text박스, select박스, 체크박스 등 다양한 태그를 사입하여 셀을 수정할 수 있다. 

수정 기능 사용 시에는 반드시 cellEdit을 true 값으로 해야한다. 그리드 선언 시에 cellEdit를 true로 하거나 setGridParam을 통해서 cellEdit 속성을 true로 설정하셔야 셀 수정이 가능합니다.

ex) $("#gridId").jqGrid("setGridParam", { cellEdit: false });

 

$("#gridId").jqGrid(    
  ...    
  // width : 100,    
  autowidth : true,
  shrinkToFit : true, 
  cellEdit: true,
  cellsubmit: "clientArray",
  ...    
  colModel : [        
    {name: 'test', index: 'test', label: '테스트', width: 20, align: center,
    	editable: true, edittype: "text" 
	},        
    ...
  ],
  ...
);

 

1) editable 

editable 옵션은 boolean 형식이며, 해당 필드의 편집여부를 결정한다. 기본값은 false이며, editable:true 설정 시 편집가능하게 설정된다.

 

2) edittype

옵션은 편집가능한 필드의 타입을 정의하며 사용 가능한은 'text', 'textarea', 'select', 'checkbox', 'password', 'button', 'image', 'file', 'custom' 이 있고, 기본값은 'text'이다.

 

3) editoptions
editoptions는 편집열에 대한 정보가 들어있는 배열이며 edittype에서 선택한 값에따라 유효한 속성을 설정해야 한다.

자세한 내용은 아래 링크 참조

예시1)

...
colModel : [  
  {name: "dispStartDt", index: "dispStartDt", align: "center", width: 80, fixed: true, editable: true, sortable: true, edittype: "custom", 
      editoptions: {
            custom_element: function(value) {
                var elHtml  = '<div class="input-group date">'
                + '<input type="text" name="dispStartDt" value="' + value + '" class="form-control" style="width:100%;" readonly="readonly" />'
                + '<span class="input-group-addon" style="padding:2px 5px;"><i class="fa fa-calendar"></i></span>'
                + '</div>';
                return $(elHtml)[0];
            },
            custom_value: function(elmt) {
                return $("input", elmt).val();
            },
            dataInit: function(elmt) {
                $(".input-group", elmt).datepicker($this.datePickerOptions);
            }
      }
  },
],
...

edittype이 "custom"인 경우 editoptions에 custom_element와 custom_value를 설정할 수 있다.

 

예시2) 

...
colModel : [  
	{name: "test" index: "test", align: "center", width: 80, editable: true, edittype: "select", 
    		editoptions: {value: "value1:key1;value2:key2;value3:key3"}},
    	{name: "test" index: "test", align: "center", width: 80, editable: true, edittype: "select", 
        	editoptions: {value: "{1:'key1',2:'key2',3:'key3',}", defaultValue:1}}
],
...
        

 

 

2. cellEdit 모드 종료

...
colModel: [
...
],
// 셀 클릭 이벤트
onCellSelect: function(rowId, colIndex, cellCont) {
	if (colIndex > 1) {
		var gridList = $("#gridId");
		var model = gridList.jqGrid("getGridParam", "colModel")[colIndex];
		var rowData = gridList.jqGrid("getRowData", rowId);
        
		if(model.name == 'test') {
			gridList.jqGrid("setColProp", "test", { editable: true });
		}
	}
},
// 셀 에디터 후 이벤트
afterEditCell: function(rowId, cellName, value, rowIndex, colIndex) {
	var gridList = $("#gridId");
	var cellElmt = $("#" + rowIndex + "_" + cellName);
	var tdElmt   = cellElmt.closest("td");
    
    if(cellName == 'test') {
    	cellElmt.off("blur").on("blur", function() {
        	gridList.jqGrid("saveCell", rowIndex, colIndex);
        	// editCell 옵션 끄기
        	gridList.jqGrid("editCell", rowIndex, colIndex, false);
        });
    }
},
// 셀 저장 후 이벤트
afterSaveCell: function(rowId, cellName, value, rowIndex, colIndex) {
	var gridList = $("#gridId");
	if(cellName == 'test') {
    	gridList.jqGrid("setCell", rowId, "test", value);
    }
}

$("gridId").se.jqGrid("setGridParam", {cellEdit: false }); 와 같이 특정 이벤트를 걸어 cellEdit을 종료할 수 있지만, 그리드 셀에서 수정기능을 끄고 키는 기능을 구현할 수 있다. onCellSelect 이벤트와 afterEditCell 이벤트를 활용하여, $("gridId").jqGrid("setColProp", "test", { editable : true }); // 또는 editable : false를 설정하여 셀의 edit모드를 진입/종료 를 할 수 있다. 또한 $("gridId").jqGrid("editCell", rowIndex, colIndex, ture); // false 또는 를 통해서 edit모드를 진입/종료할 수 있다.

 

 

 

 

 

 

 

 

1004lucifer.blogspot.com/2019/05/jqgrid_4.html

[jqGrid] 편집 공통규칙 설명