이미지를 jqgrid 열에 업로드하는 방법

Question

jqGrid는 아래의 colmodel을 사용하여 열의 이미지를 보여줍니다. 이미지는 데이터베이스에 2 진 컬럼으로 저장됩니다. 사용자가 기존 행과 새 행에 이미지를 업로드하는 것을 허용하는 방법은 무엇입니까?

colModel: [{"name":"ProductId","edittype":"custom","editoptions":{"custom_element":function(value, options) { return combobox_element(value, options)} 
,"custom_value":combobox_value 
},"editable":true,"width":112,"fixed":true,"hidden":false}, 

{"name":"Image","formatter":function(cell, options,row) { 
          return "<img src='Grid/GetImage?image=" + row[0] + "'/>" 
} 
}] 

public FileContentResult GetImage(string image) { 
    byte[] image = .... 
    return File(image, "image/jpg"); 
} 

Answer 1

문제가있는 jqGrid가 아약스를 사용하고, 이미지 업로드 파일 대화가 필요하며, 파일 대화 상자가 아약스 이상 작동하지 않습니다.

인라인 편집을 수행하지 않고 (다른 그리드 에서처럼)이 작업을 수행했지만 사용자가 인라인 편집 버튼을 클릭하면 다른 페이지의 양식으로 리디렉션되었습니다. 편집을위한 하나의 양식과 추가를위한 양식. 그런 다음이 양식에는 파일 대화 상자뿐만 아니라 행 편집/추가를위한 다른 양식 요소가 있습니다. 양식이 제출되면 사용자는 다시 그리드로 재 지정됩니다.

대부분의 격자에서 나는 포멧을 사용합니다 : 'actions'과 navgrid. 그러나 이미지 그리드를 위해이처럼 한 다음 navgrid를 들어

, 나는 다음과 같은 코드를 사용합니다

그것은 호출

jQuery("#grid1").jqGrid('navGrid', '#pager1', 
      { search: false, editfunc: goEdit, addfunc: goAdd }, //options 

기능 goEdit(), 등, 다음과 같이 :

'actions' 열 :

{ name: 'RowActions', width: 60, fixed: true, sortable: false, resize: false, formatter: formatCustomED }, 

function goEdit(rowid) { 
     window.location = "/controllerName/EditFormName/" + rowid; 
    } 

이 열은 일반적으로 포맷 인 열을 대체formatCustomED 함수는 인라인 편집 이미지를 만들어 리디렉션하게 만듭니다.

formatCustomED = function (el, cellval, opts) { 
     return "<div style=\"float: left; cursor: pointer;padding-left:8px\" class=\"ui-pg-div ui-inline-edit\" onmouseover=\"jQuery(this).addClass('ui-state-hover');\" title=\"Edit selected row\" onmouseout=\"jQuery(this).removeClass('ui-state-hover')\" onclick='goEdit(" + opts[0] + ")'><span class=\"ui-icon ui-icon-pencil\"></span></div><div style=\"margin-left: 5px; float: left;\" class=\"ui-pg-div ui-inline-del\" onmouseover=\"jQuery(this).addClass('ui-state-hover');\" title=\"Delete selected row\" onmouseout=\"jQuery(this).removeClass('ui-state-hover');\" onclick=\"doDelete("+opts[0]+")\"><span class=\"ui-icon ui-icon-trash\"></span></div>"; 
    }