easuyui中在固定位置显示悬浮图片和在datagrid中表格中的元素单击显示图片

2019独角兽企业重金招聘Python工程师标准>>>

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

图片在数据库中保存的是字符串,该字符串是利用QQ截图的原理保存的,多个图片之间以{}进行连接;

function imageFormatter(value,row,index){
    var value1 = "<a οnclick=\"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"  
                });  
            });
        },

 

转载于:https://my.oschina.net/u/2331760/blog/676872