在easydatagrid列表里面显示图片,并实现点击预览功能,可以使用以下方法进行实现:
下面我以图片字段格式为:upload/file/aa.png,upload/file,bb.png来简单说明
这个是datagrid列表显示的那一行
<th data-options="field:'goods_img',width:90,align:'center',formatter:imgFormatter">商品图片</th>
//显示图片的js函数
//图片添加路径
function imgFormatter(value,row,index){
if('' != value && null != value){
var strs = new Array(); //定义一数组
if(value.substr(value.length-1,1)==","){
value=value.substr(0,value.length-1)
}
strs = value.split(","); //字符分割
var rvalue ="";
for (i=0;i<strs.length ;i++ ){
rvalue += "<img onclick=dimgloadwin(\""+strs[i]+"\") style='width:66px; height:60px;margin-left:3px;' src='<%=path%>" + strs[i] + "' title='点击查看图片'/>";
}
return rvalue;
}
}
//这里需要自己定义一个div 来创建一个easyui的弹窗展示图片
function dimgloadwin(img){
var simg = "http://www.**.com/"+ img;
$('#dahuikuimg').dialog({
title: '预览',
width: 800,
height:800,
resizable:true,
closed: false,
cache: false,
modal: true
});
$("#simg").attr("src",simg);
}
记录在BODY结尾前加一行代码:
<div id='dahuikuimg'></div>