easyUI datagrid单元格鼠标mouseover事件的图片预览实现

我们在easyUI的datagrid中可以实现图片缩略图的查看，但是缩略图还是太小，所以需要在鼠标移动到缩略图时能够查看原始的预览图，本文就是介绍这样的实现方法。

easyUI datagrid列表里面显示图片的方法可以参见：http://www.codeinn.net/misctech/1276.html

实现效果一般如下：

不过还是能够显示大图比较好，所以需要增加单元格的鼠标mouseover事件，在datagrid的onLoadSuccess事件中绑定：

onLoadSuccess:function(){
  $(".datagrid-row img").mouseover(function(){
    var src = $(this).attr("src");
    console.log("datagrid-row...src..."+src);
    if(""!=src){
      //var field = $(this).attr("field");
      var xOffset = 100;
      var yOffset = 100;
      
      var xLeft = $(this).offset().left + yOffset;
      console.log("datagrid-row...document.body.clientWidth..."+document.body.clientWidth);
      console.log("datagrid-row...xLeft..."+xLeft);
      if(xLeft+800>document.body.clientWidth){
        xLeft = document.body.clientWidth - 800;
      }

      $("#dialogImgView img").attr("src", src);
    	$('#dialogImgView').dialog({
    	    title: '图片预览',
    	    width: 800,
    	    height: 620,
    	    left: xLeft,
    	    top: $(this).offset().top + xOffset,
    	    modal: false
    	});
    }
  });
  $(".datagrid-row img").mouseout(function(){
    $('#dialogImgView').window('close');
  });
}

当然，我们还增加了mouseout事件，关闭掉预览的窗口。

最终实现的效果如图：