easyui学习:datagrid显示图片并预览的实现方法

在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>


猜你喜欢

转载自blog.csdn.net/lemeng8/article/details/77193542
今日推荐