对应datagrid
<th data-options="field:'info_content',width:120,align:'center',formatter:userPicInfo.imgFormatter">
图片内容
</th>
<!-- 图片预览功能 -->
<div style="display: none">
<div id="dlg" class="datagrid-toolbar" style="padding:5px;">
<img id="simg" src="" alt="">
</div>
</div>
js
imgFormatter: function (value, row, index) {
if ('' != value && null != value) {
var strs = new Array(); //定义一数组
// if (value.substr(value.length - 1, 1) == ",") {
// value = value.substr(1, value.length - 2)
// }
value = value.substr(1, value.length - 2);
strs = value.split(","); //字符分割
var rvalue = "";
for (var i = 0; i < strs.length; i++) {
rvalue += "<img onclick='userPicInfo.download(\"" + strs[i] + "\")' style='max-width:66px; max-height:40px;margin-left:3px;' src='" + strs[i] + "' title='点击查看图片'/>";
}
return rvalue;
}
},
// //这里需要自己定义一个div 来创建一个easyui的弹窗展示图片
download: function (url) {
$('#dlg').dialog({
title: '预览',
width: 600,
height: 400,
resizable: true,
closed: false,
cache: false,
modal: true
});
$("#simg").attr("src", url);
}