easyui中图片显示总结

最新推荐文章于 2025-06-15 13:07:47 发布

killmanback

最新推荐文章于 2025-06-15 13:07:47 发布

阅读量8.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏：总结

本文链接：https://blog.youkuaiyun.com/killmanback/article/details/79863368

总结专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用EasyUI在Datagrid中展示图片，包括直接显示图片、点击预览大图的功能实现，以及如何在EasyUI Dialog中加载并展示多张图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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:5px;"> <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 onclick='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);
    });
}