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);
    }