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>

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

最后

以上就是热心柠檬为你收集整理的easyui中图片显示总结的全部内容，希望文章能够帮你解决easyui中图片显示总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。