easyui中图片显示总结

一、easyui-datagrid中单元格显示图片

jsp中代码：

<table id="dg" title="" class="easyui-datagrid" fit="true" url="FdPeople_query.do"  toolbar="#toolbar" pagination="true"  rownumbers="true" fitColumns="true" singleSelect="true" striped="true" nowrap="false">
    <thead>
    <tr>
        <th align="center" data-options="field:'fdCreditInformation',formatter:imgCVC">图片</th>
    </tr>
    </thead>
</table>

js中代码：

function imgCVC(value, row, index) {
    if(value!=null&&value.length>0){
        var img = "http://自己的地址"+value;
        return "<img src='"+img+"' style='width:300px; height: 200px;'>";
    }else{
        return "<span> </span>";
    }
}

二、easyui-datagrid中单元格显示图片，并点击预览显示大图

jsp中代码：

<table id="dg" title="" class="easyui-datagrid" fit="true" url="FdPeople_query.do"  toolbar="#toolbar" pagination="true"  rownumbers="true" fitColumns="true" singleSelect="true" striped="true" nowrap="false">
    <thead>
    <tr>
        <th align="center" data-options="field:'fdCreditInformation',formatter:imgCVC">图片</th>
    </tr>
    </thead>
</table>

<!-- 图片预览功能 --> < div style= " display: none " > < div id= "dlg" class= "datagrid-toolbar" style= " padding: 5 px; " > < img id= "simg" src= "" alt= "" > </ div > </ div >

js中代码：

function imgCVC(value, row, index) {
    if(value!=null&&value.length>0){
        var strs = new Array(); //定义一数组
        value = value.substr(1, value.length - 1);
        strs = value.split(","); //字符分割
        var rvalue = "";
        for (var i = 0; i < strs.length; i++) {
            rvalue += "<img οnclick='download(\"" + strs[i] + "\")' style='width:50px; height: 50px;' src='" + strs[i] + "' title='点击查看图片'/>";
        }
        return rvalue;
    }
}

function download(img){
    var simg =  "http://自己的地址"+ img;
    $('#dlg').dialog({
        title: '预览',
        width: 600,
        height:500,
        resizable:true,
        closed: false,
        cache: false,
        modal: true
    });
    $("#simg").attr("src",simg);
}

三、easyui-dialog中显示图片

jsp中代码：

<div id="dlg_detail" class="easyui-dialog" style="width:1200px;height:420px;" closed="true" buttons="#dlg_detail-buttons">
    <form id="fm_detail" method="post" style="padding-left: 20px" novalidate>
        <div class="fitem" align="left" style="padding-bottom: 10px">图片：</div>
        <div class="fitem" align="left" style="padding-bottom: 10px;padding-left: 10px">
            <img id="Photo1" src="" style="width:220px;height:200px;">
            <img id="Photo1" src="" style="width:220px;height:200px;">
            <img id="Photo3" src="" style="width:220px;height:200px;">
            <img id="Photo4" src="" style="width:220px;height:200px;">
            <img id="Photo5" src="" style="width:220px;height:200px;">
        </div>
    </form>
</div>

js中代码：

function show_detail(value){
    $.post('FdPeople_show_detail.do', {
        'id' : value
    }, function(result) {
        var strJSON = result;
        var obj = new Function("return" + strJSON)();
        
        $('#dlg_detail').dialog('open').dialog('setTitle', '信息详情');
        //图片信息
        var path = "http://自己的地址";
        $("#Photo1").attr("src",path+obj.Photo1);
        $("#Photo2").attr("src",path+obj.Photo2);
        $("#Photo3").attr("src",path+obj.Photo3);
        $("#Photo4").attr("src",path+obj.Photo4);
        $("#Photo5").attr("src",path+obj.Photo5);
    });
}