本文转载自
一、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);
});
}