easyui中显示图片

目录:

• 　　easyui-datagrid表格中显示图片。
• 　　easyui-datagrid表格中显示图片，并点击放大预览。

 

---

　　一.　easyui-datagrid表格中显示图片。

　　jsp代码

<table class="easyui-datagrid" id="gList"></table>

　　js代码

$(function (){
         $("#gList").datagrid({
                url:\'${pageContext.request.contextPath}/good/gList\',
                title:\'商品表\',
                fitColumns:true,
                pagination:true,
                singleSelect:true,
                pageSize:10,
                pageList:[10,20,30,40,50],
                columns:[[
                    {field:\'ck\',checkbox:true},
                    {field:\'id\',title:\'id\',sortable:true},
                    {field:\'goodName\',title:\'goodName\'},
                    {field:\'price\',title:\'price\'},
                    {field:\'count\',title:\'count\'},
                    {field:\'type\',title:\'type\'},
                    {field:\'picture\',title:\'picture\',formatter:formatImg}               
                ]]
        });
　　

　　function formatImg(value,row,index){
　　if(value){
　　　　return "<img src=\'${pageContext.request.contextPath}/iamge/"+value+"\' style=width:80px;height:50px;>"

　　}else{
　　　　return null;
　　}
　　}

 

　　

---

　　二. easyui-datagrid表格中显示图片，并点击放大预览。

　　jsp代码

<table id="tb" class="easyui-datagrid" pagination="true"  rownumbers="true" fitColumns="true" singleSelect="true" striped="true" nowrap="false"  data-options="
        title:\'商品表\',
        fitColumns:true,
        pagination:true,
        singleSelect:true,
        pageSize:10,
        pageList:[10,20,30,40,50],
        url:\'${pageContext.request.contextPath}/good/gList\',
        method:\'get\'
    ">
     <thead>
        <tr>
              <th data-options="field:\'ck\',width:80,checkbox:true"></th>
             <th data-options="field:\'id\',width:100">id</th>
             <th data-options="field:\'goodName\',width:80,align:\'right\'">goodName</th>
             <th data-options="field:\'price\',width:80,align:\'right\'">price</th>
             <th data-options="field:\'count\',width:250">count</th>
             <th data-options="field:\'type\',width:60,align:\'center\'">type</th>
             <th data-options="field:\'picture\',width:60,align:\'center\',formatter:showImg">picture</th>        
        </tr>
    </thead>    
    </table>
    
    <!-- 图片预览 -->
    <div style="display:true;" >
        <div class="datagrid-toolba" id="imgDataGrid" style="padding:5px" >
            <img src="" id="picture" >
        </div>
    </div>

 

 

 

　　js代码

 

/* 图片显示函数 */
    function showImg(value,row,index){
        if(value!=null&& value.length>0){
            //定义数组
            var strs=new Array();
            /* //截取
            value=value.substr(1,value.length-1); */            
            //字符分割成数组
            strs=value.split(",");            
            var retValue="";
            
            for(var i=0;i<strs.length;i++){                
                retValue+="<img  style=\'width:50px; height: 50px;\' src=\'你的路径/" + strs[i] + "\' title=\'点击查看图片\'  onclick=\'yuLanImg(\"" + strs[i] + "\")\' />";
            }
            return retValue;
        }    
    }

    /* 预览图片 */
    function yuLanImg(img){
        var img=\'你的路径\'+img;        
        $(\'#imgDataGrid\').dialog({
            title: \'预览\',
            width:200,
            height:200,
            resizable:true,
            closed: false,
            cache: false,
            modal: true           
        });
        $("#picture").attr(\'width\',"190px");
        $("#picture").attr(\'height\',"190px");
        $("#picture").attr(\'src\',img);
    }