拓展12-easyUI datagrid列表图片展示小图，鼠标悬停放大预览

easyUI datagrid 图片预览：悬停放大效果实现

原创

于 2019-12-23 17:22:08 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#datagrid #js #easyui

本文介绍了如何在easyUI datagrid中实现列表小图展示，当鼠标悬停时预览高清大图的效果。通过onmouseover和onmouseout事件处理，配合jsp页面和js代码，实现了图片的格式化展示和动态放大功能。

1、效果图

datagrid列表内展示的为小图，悬停展示的为高清大图
onmouseover悬停事件
onmouseout移走事件

在这里插入图片描述

2、jsp页面

<th data-options="field:'smallPic',width:20,formatter:smallpicFormt">图片</th>

3、js格式化图片展示

οnmοuseοver='bigImg(this)
οnmοuseοut='closeImg()

//smallpic格式化
function smallpicFormt(v, r, i) {
   
   
    return "<img src=" + v + " οnmοuseοver='bigImg(this)' οnmοuseοut='closeImg()' style=" + "'width: 50px;height: 50px'" + ">";
}

4、onmouseover事件

//鼠标放上去
function bigImg(imgObj) {
   
   
    var picdialog = $("#picdialog");
    var imgid = $("#img_id");
    if ((imgObj == undefined || imgObj == null || imgObj.length == 0)
        || ($(imgObj).attr(