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。但对于带有图像的网格，它就像这样：

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

如何将图像上传到jqgrid列

1 个答案: