jqgrid画像列は、以下のcolmodelを使用して定義されます。フォーム編集モードでは、マウスが画像の上にある場合、カーソルは手に変わりますが、画像のクリックは無視されます。
画像をクリックした場合、別のウィンドウに大きな画像を表示するにはどうすればよいですか?大きな画像はURLによって返され'http://localhost/Grid/GetImage?id=' + options.rowId
ます(サイズパラメータなし)。
{"label":"Logo","name":"_image_Logo","edittype":"image",
"editoptions":{"src":""},
"editable":true,
"formatter":function(cell,options,row) {
return '<img src="http://localhost/Grid/GetImage?size=150&id=' +
options.rowId +'" />';
} ,
"search":false,"title":false,"width":150},
{"edittype":"file","label":"","name":"Logo","search":false,
"title":false,"width":150,"hidden":true,
"editrules":{"edithidden":true},"editable":true}
アップデート
以下のcolmodelを使用して、OlegとMichaelの提案を試しました。行IDをイメージコントローラーに渡す必要があります。グリッドクリック画像でOK、大きな画像が開きます。options.rowId
画像IDを返します。
編集フォームでは、行IDは渡されません。クリックイベントoptions.rowId
の代わりに渡す方法は?e.target.id
{"name":"Image",
"edittype":"image",
"editoptions":{
"src":"",
"dataEvents":[{"type":"click","fn":function(e) {
window.open('GetImage?id=' + e.target.id, e.target.id )
}
}]},
"editable":true,
"formatter":function(cell,options,row) {
return '<a href="GetImage?id=' + options.rowId+'"><img src="GetImage?size=54&id=' +
options.rowId +'" /></a>';
}
,"search":false,"title":false,"width":54},