Question

使用下面的colmodel定义jqgrid图像列。在表单编辑模式下，如果鼠标位于图像上，则光标变为手形，但忽略图像中的单击。

如果单击图像，如何在分隔窗口中显示大图像？大型图片由网址'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传递给图像控制器。在网格点击图像工作正常，打开大图像。 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},

Answer 1

如果您将格式化程序更改为<a href="LARGE_IMAGE_URL"><img src="IMAGE_URL" /></a>之类的内容会怎样？这是你想要的吗？

Answer 2

您可以使用例如onCellSelect或beforeSelectRow来捕捉图片上的click，并实施您需要的任何自定义操作（如显示大图）。

如果您只需要在编辑模式下对click图片执行某些操作，则可以使用editoptions的dataEvents属性。

如果在jqgrid中单击图像，如何显示大图像

2 个答案: