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

来源：互联网发布：黑客军团第三季知乎编辑：程序博客网时间：2024/06/10 03:21

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

阅读全文

0 0