jqgrid - 如何上传图片到jqgrid列

Question

jqGrid 使用下面的 colmodel 在列中显示图像。图像以二进制列存储在数据库中。 如何允许用户将图像上传到现有行和新行？

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 使用 ajax，图像上传需要一个文件对话框，而文件对话框不能在 ajax 上工作。

我通过不进行内联编辑(就像在其他网格上所做的那样)来解决这个问题，但是当用户单击内联编辑按钮时，我重定向到另一个页面上的表单。一种用于编辑，另一种用于添加。这些表单然后具有文件对话框，以及用于编辑/添加行的其他表单元素。提交表单后，用户将被重定向回网格。

在大多数网格中，我使用格式化程序:'actions'，以及 navgrid。但是对于带有图像的网格，它是这样做的:

对于导航网格，我使用以下代码:

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

它调用函数 goEdit() 等，如下所示:

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

此列替换通常为格式化程序的列:'actions' 列:

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

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>";
    }