[jqgrid] 그리드 입력폼 구현하기

방법1. jqgrid의 editable, edittype 사용하기

var $grid=$("#grid").grid({
            url           : {url},
            postData      : {param},
            cmTemplate    : {sortable : false},
            datatype      : "local",
            colModel      : [
				...
                {name : "apiTransmitYnReason",  label : "사유", width : 180, editable : "true", edittype : "text" },
                ...
            ],
            autowidth     : true,
            shrinkToFit   : false,
            height        : 490,
            multiselect   : true,
            rowNum        : 100,
             'cellEdit'	  : true,
            'cellsubmit'  : 'clientArray'
});

 

 

방법2. javascript 함수 만들어 구현하기

var $grid=$("#grid").grid({
            url           : {url},
            postData      : {param},
            cmTemplate    : {sortable : false},
            datatype      : "local",
            colModel      : [
				...
                {name : "apiTransmitYnReason",  label : "사유", width : 180, formatter : createdInputForm(함수명) },
                ...
            ],
            autowidth     : true,
            shrinkToFit   : false,
            height        : 490,
            multiselect   : true,
            rowNum        : 100,
             'cellEdit'	  : true,
            'cellsubmit'  : 'clientArray'
});

function createdInputForm (celvalue, icol, rowObj) {
	var width = icol.colModel.width * 0.98;
	var value = '';
	if (celvalue !== undefined && celvalue != null) {
		value = celvalue;
	}
    var input = "<input type='text' id='"+icol.rowId+"_"+icol.colModel.name+"_"+icol.gid+"' name='"+icol.colModel.name+"_"+icol.gid+"' rowidx='"+icol.rowId+"' style='font-size: 12px;height:25px;width:"+width+"px;border:1px solid #red;' value='"+value+"'/>";
    return input;
}