參考:Layui 數據表格顯示圖片,鼠標滑過圖片放大
HTML img 刷新圖片的問題
layer Tips的簡單使用及圖片顯示
table.render({
elem: "#table_list",
url: "/table",
cols: [
[
{ checkbox: true, fixed: true },
{ field: "id", title: "ID", align: "center", sort: true, width: 50 },
{ field: "image", title: "圖片"},
]
],
id: "listReload",
page: true,
height: "full-130",
done:function(res,curr,count){
console.log("*****")
hoverOpenImg();//hover顯示大圖
$('table tr').on('click',function(){
console.log("*****")
$('table tr').css('background','');
$(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
});
}
});
function hoverOpenImg(){
var img_show = null; // tips提示
var kd,kd1
$('tbody tr').hover(function(){
// console.log($(this)[0].childNodes[5].innerText)
kd=$(this).width();
kd1=kd*0.2; //圖片放大倍數
var img = "<img class='img_msg' src='"+$(this)[0].childNodes[5].innerText+"?t"+Math.random()+"' style='width:"+kd1+"px;' />";
img_show = layer.tips(img,".input-cont",{time:0, tips: [3, '#ffffff']});
console.log(img)
},function(){
layer.close(img_show);
});
$('td img').attr('style','max-width:50px;display:block!important');
}