Layui 数据表格显示图片,鼠标滑过图片放大
<sricpt>
table.render({
elem: '#images',
cellMinWidth: 80,
url: '/........', //数据接口
limit: 10,
page: true, //开启分页
cols: [
[ //表头
{
field: 'id',
title: 'ID',
sort: true,
fixed: 'left'
},
{
field: 'images',
title: '图片',
templet: '#showimg' //自定义显示图片方法
}
]
],
done:function(res,curr,count){
hoverOpenImg();//显示大图
$('table tr').on('click',function(){
$('table tr').css('background','');
$(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
});
}
});
function hoverOpenImg(){
var img_show = null; // tips提示
$('td img').hover(function(){
var kd=$(this).width();
kd1=kd*3; //图片放大倍数
kd2=kd*3+30; //图片放大倍数
var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:"+kd1+"px;' />";
img_show = layer.tips(img, this,{
tips:[2, 'rgba(41,41,41,.5)']
,area: [kd2+'px']
});
},function(){
layer.close(img_show);
});
$('td img').attr('style','max-width:70px;display:block!important');
}
</sricpt>
<script type="text/html" id="showimg">
<img src="{{ d.images}}"/>
</script>
PS:新手勿喷,仅记录