Easyui Learning: DataGrid display picture and preview the implementation method __datagrid display picture

Displays the picture in the Easydatagrid list, and realizes clicks the preview function, may use the following method to implement:

Below I use the Picture field format as: Upload/file/aa.png,upload/file,bb.png to simply explain

This is the line shown in the DataGrid list.

<th data-options= "field: ' Goods_img ', width:90,align: ' Center ', formatter:imgformatter ' > Product picture </th>

Show the JS function of a picture

  //Picture Add path       function Imgformatter (value,row,index) {            if ('!= value && null!= value) {        & nbsp var STRs = new Array ();
Define an array             if (value.substr (value.length-1,1) = = ",") { 
            value=value.substr (0,value.length-1)          }                STRs = Value.split (","); Character segmentation           var rvalue = "";                      for (i=0;i<strs.length i++) {     & nbsp;          rvalue + = " ' + strs[i] + ' title= ' Click to view the picture '/> ';              }             return  rvalue;                  }          }  //Here you need to define a div   To create a Easyui window display picture       function Dimgloadwin (img) {           var simg =  "http://www.**.com/" + img;           $ (' #dahuikuimg '). Dialog ({               title: ' Preview ',                width:800,               height:800,               resizable: True,               Closed:false,                Cache:false,                modal:true          });           $ ("#simg"). attr ("src", simg);
      }     

Record a line of code before the end of the body:

<div id= ' dahuikuimg ' ></div>