easuyui中在固定位置顯示懸浮圖片和在datagrid中表格中的元素單擊顯示圖片

  <th field="styleImage"  sortable="false" align="center" formatter="imageFormatter" >模板圖片</th>

圖片在數據庫中保存的是字符串,該字符串是利用QQ截圖的原理保存的,多個圖片之間以{}進行鏈接;

function imageFormatter(value,row,index){
    var value1 = "<a onclick=\"showImage('"+value+"');return false;\" name=\""+row.remark+"\" imageUrl='"+value+"' class=\"l-btn l-btn-small l-btn-plain tooltip2\"   data-options=\"plain: true\"><span class=\"l-btn-left l-btn-icon-left\"><span class=\"l-btn-text\">查看</span><span class=\"l-btn-icon icon-standard-zoom\"></span></span></a>";
    return value1;
}

//在對話框中顯示多個圖片

function showImage(param){
    if(param != null && param !="" && param != "null"){
        var imgs = imagelist = param.split("{}");
        console.info(imgs);
        $("body").append("<div id='imgDiv'></div>");
        $("#imgDiv").append("<hr>");
        for(var i = 0;i<imgs.length;i++){
            $("#imgDiv").append("<span><img src="+imgs[i]+" /></span>");
        }
        $.easyui.showDialog({ 
            title:'報表模板圖片 ',
            width : 900,
            height :600,
            topMost: true,
            iniframe: false,//這個和content有衝突,只能選其一
            closable: true,
            maximizable: false,
            enableCloseButton: true,
            enableSaveButton:true,
            saveButtonText: "肯定",
            enableApplyButton:false,   
           content: $("#imgDiv")[0],//這裏能夠放入字符串"a",或者是html標籤"<a></a>",或者是dom元素節點
//          locale: "#imgDiv",//這裏能夠放置一個字符串("#id"),也能夠放入一個JQUERY對象,表示dialog顯示的入容器,彈幕會在父容器中出現,若是想在某個頁面都被彈幕遮蓋,那麼使用body做爲父容器,即這裏填入的是 locale:"body"
        });
    }else{
        $.easyui.messager.show({ icon: "info", msg: "無模板圖片顯示", position: "topCenter" ,timeout:3000}); 
    }
}

鼠標懸浮在固定div中顯示圖片:

這個在datagrid的onLoadSuccess事件中進行處理:

onLoadSuccess: function(node,data)
        {    
//            var x = 10;  
//            var y = 20;  
            $("a.tooltip2").mouseover(function (e) { 
            this.myTitle = $(this).attr("name");  
            this.imageUrl = $(this).attr("imageUrl");
            if(this.imageUrl == null || this.imageUrl == "" || this.imageUrl == 'null'){
                return false;
            }
            this.title = "";  
            var imgs  = this.imageUrl.split("{}");
            var imgTitle = this.myTitle ? "<br />備註說明：" + this.myTitle + "" : "";  
            $("body").append("<div id='tooltip3'></div>");
            for(var i = 0;i<imgs.length;i++){
                $("#tooltip3").append("<img src='" + imgs[i] + "' alt='報表預覽圖' width='500px' height='200px' />");
            }
            $("#tooltip3").append(""+imgTitle+"");
            $("#tooltip3").css({  
//                "top": (e.pageY + y) + "px",  
//                "left": (e.pageX + x) + "px",  
                "top": "0px",  
                "left": "500px",
            }).show("fast");  
            })
            .mouseout(function (e) {  
                this.title = this.myTitle;  
                $("#tooltip3").remove();  
            }).
            mousemove(function (e) {  
                $("#tooltip3").css({  
//                    "top": (e.pageY + y) + "px",  
//                    "left": (e.pageX + x) + "px",  
                    "top": "0px",  
                    "left":"500px"  
                });  
            });
        },