位置:首页 » 文章/教程分享 » easyUI datagrid列表里面显示图片并预览的实现方法
 想要在easydatagrid列表里面显示图片,并实现点击预览功能,可以使用以下方法进行实现:

下面我以图片字段格式为:upload/file/aa.png,upload/file,bb.png来简单说明

//这个是datagrid列表显示的那一行
<th data-options="field:'images',width:300,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=download(\""+strs[i]+"\") style='width:66px; height:60px;margin-left:3px;' src='<%=path%>" + strs[i] + "' title='点击查看图片'/>";  
        }   
    return  rvalue;        
     }  
    }  

最后是预览
//这里需要自己定义一个div   来创建一个easyui的弹窗展示图片  
    function download(img){  
        var simg =  "http://img02.ygqq.com/"+ img;  
        $('#dlg').dialog({  
            title: '预览',  
            width: 600,  
            height:750,  
            resizable:true,  
            closed: false,  
            cache: false,  
            modal: true  
        });  
        $("#simg").attr("src",simg);  
          
    }