您的位置:首页 > 产品设计 > UI/UE

easyui-datagrid页面显示图片,点击弹框展示图片

2017-08-29 17:44 1626 查看
对应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);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐