实现效果如何,鼠标移动到图片上,图片自己放大!
<table class="layui-hide" id="ContractCheck"></table>
<script>
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#ContractCheck'
, url: " http://localhost:8839/NO1/V1/ContractCheck/GetAllContract"
, parseData: function (res) {
if (res.length == 0) {
return {
"code": 0,
"msg": "",
"data": res
}
}
else {
return {
"code": 0,
"msg": "",
"count": res[0].total,
"data": res
}
}
}
, groups: 10
, layout: ['prev', 'page', 'next', 'skip', 'count', 'limit']
, cellMinWidth: 60 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
, cols: [[
{ type: 'checkbox', fixed: 'left' }
, { fixed: "", field: 'contract_Year', title: '年份', sort: true, templet: '#yearFormat', align: 'center', width: 90 }
, { field: 'organization', title: '期数', sort: true, align: 'center', width: 90 }
, { field: 'user_name', title: '姓名', align: 'center', width: 90, fixed: '' }
, { field: 'contract_Name', title: '合同', align: 'center', width: 200 }
, { field: 'contract_Copy_Url', title: '合同扫描件', templet: '#ContractPicture', align: 'center', width: 120 }
, { filed: 'showScreenhost', title: '缴费截图', align: 'center', width: 400, templet: '#showScreenhost' } /*< div > {{ showScreenhost(d.id) }}</div >*/
, { field: 'sc_check_state', title: '截图状态', align: 'center', templet: '#CheckState', width: 100 }
, { field: 'operate', title: '提醒', toolbar: '#barDemo', align: 'center', width: 100 }
, { fixed: 'right', title: '操作', toolbar: '#barOperator', align: 'center', width: 220 }
]]
, page: true
, even: true
// , skin: 'line' //表格风格
, id: 'ContractReload'
, 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 * 6; //图片放大倍数
kd2 = kd * 5 + 100; //图片放大倍数
var img = "<img class='img_msg' src='" + $(this).attr('src') + "' style='width:" + kd1 + "px;' margin=0px padding=0px/>";
img_show = layer.tips(img, this, {
tips: [2, 'rgba(41,41,41,.0)']
, area: [kd2 + 'px']
});
}, function () {
layer.close(img_show);
});
$('td img').attr('style', 'max-width:70px;display:block!important');
}