easyUI中datagrid鼠标悬浮列上显示对应图片

最新推荐文章于 2023-05-25 11:07:15 发布

lxacdf

最新推荐文章于 2023-05-25 11:07:15 发布

阅读量2.8k

点赞数 1

分类专栏：前端文章标签： easyui

本文链接：https://blog.csdn.net/lxacdf/article/details/75217304

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本例是jsp版写的easyUI例子

一、jsp中代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+ "://"+ request.getServerName()+ ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE>
<html>
<head>
    <title>悬浮显示图片</title>
    <base href="<%=basePath%>"/>
    <link rel="stylesheet" type="easyui.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.tooltip.js"></script>
</head>
<body class="easyui-layout">
    <div data-options="region:'center'" title="">
        <table class="easyui-datagrid" id='dg' ,
            title="礼品列表"
            data-options="singleSelect:true,
                collapsible:true,
                fit: true,
                rownumbers: true,
                onLoadSuccess:onLoadSuccess">
            <thead>
                <tr>
                    <th data-options="field:'id',width:150,hidden:true"></th>
                    <th data-options="field:'name',width:300">
                            名称
                    </th>
                    <th data-options="field:'remark',width:300">
                            描述
                    </th>
                </tr>
            </thead>
        <table>
    </div>
</body>
<script type="text/javascript">
//悬浮显示图片
function onLoadSuccess(){
    var rows = $('#dg').datagrid('getRows');
    if(rows!=undefined && rows.length>0){
        var dgDivArr =$('#dg').parent();
        var tableTd=$(dgDivArr).find('div.datagrid-body td[field="name"]');
        tableTd.each(function () {
            var $this = $(this);
            var index = $this.parent('tr').attr('datagrid-row-index');
            var currentRow = rows[index];
            var content="";
            if(currentRow.id!=undefined){
                //请求后台获取图片地址
                var url='rest/demoRestFul/getEntity/'+currentRow.id;
                var imgData=getRestData(url,undefined);//获取含有图片地址的json对象
                if(imgData.adress!=undefined){
                    content = "<img style='width:240px; height:240px;' src='"+ imgData.adress +"'/>";
                }else{
                    content = '<div style=" max-width:700px;word-break: break-all; word-wrap: break-word;">' + currentRow.name + '</div>'; 
                }
            }
            $this.tips({ content: content, wrapColor: 'black' });
        });
    }
}
//ajax请求后台
function getRestData(url,func){
    var data = [];
    $.ajax({
        type : 'get',
        url : url,
        async: false,      //ajax同步  
        contentType:"application/json;charset=UTF-8",  //发送至服务器的类型
        dataType : "json",     //预期服务器返回类型
        success:function(result){
            if(func == undefined){
                if(result.success){
                    data = result.data;
                }else{
                    alert(result.message);
                }
            }else{
                func(result);
            }
        },error:function(){
            alert('网络异常');
        }
    });
    return data;
}
</script>

二、注意需要引入jquery、easyui以及jquery.easyui.tooltip.js三个资源文件才可以正常访问；
附：jquery.easyui.tooltip.js的资源地址：http://download.csdn.net/detail/lxacdf/9900802
三、效果图：
悬浮显示图片