ajax异步获取提示框数据（鼠标悬浮事件）

var floatInfo = new Array();//房源浮窗信息
var mystr = "";//房源浮窗属html
function FloatInfoById(houseId, e) {
    mystr = "";
    if (floatInfo[houseId] == "" || floatInfo[houseId] == undefined) {
        mystr = ajaxFloatInfo(houseId);
    }
    else {
        mystr = JS_FloatInfo(houseId);
    }
    $("#flckdiv").html(mystr);
    showFloat(e, mystr);
}

function ajaxFloatInfo(houseId) {
    $.ajax({
        url: '/House/HouseInfo/GetInfoById',
        type: "post",
        cache: false,
        async: false,  //同步方式发起请求
        data: { Id: houseId },
        success: function (ds) {
            if (ds[1].length <= 0 || ds[0].length <= 0) {
                mystr += "<div style='color:#ffffff;'>无精耕数据</div>";
            }
            else {
                mystr += "<table id='tb_infolist' style='text-align:left;color:#ffffff; border-collapse:separate;border-spacing:3px;'>";
                mystr += "<tr><td>跟单：" + ds[0][0].clientPerInfo + "</td><td>&nbsp;&nbsp;</td><td  style='width:130px ;'>" + ds[0][0].clientTime + "</td></tr>";
                mystr += "<tr><td>店长：" + ds[0][0].clientPerInfo2 + "</td><td>&nbsp;&nbsp;</td><td></td></tr>";
                mystr += "<tr  style='border-bottom:1px solid #fff;'><td  style='border-bottom:1px solid #fff;'></td><td  style='border-bottom:1px solid #ff'></td><td  style='border-bottom:1px solid #fff'></td>   </tr>";

                if (ds[1].length > 0) {
                    mystr += "<tr style='text-align:center'><td><strong>精耕内容</strong></td><td>&nbsp;&nbsp;</td><td><strong>精耕时间</strong> </td></tr>";
                    mystr += "<tr  style='border-bottom:1px solid #fff;margin-top:15px'><td  style='border-bottom:1px solid #fff'></td>    <td  style='border-bottom:1px solid #ff'>    </td><td  style='border-bottom:1px solid #fff'></td>   </tr>";
                    for (var i = 0; i < ds[1].length; i++) {
                        if (ds[1][i].remark.length > 90) {
                            ds[1][i].remark = ds[1][i].remark.substring(0, 89) + "..."
                        }
                        mystr += "<tr><td>" + ds[1][i].remark + "</td><td>&nbsp;&nbsp;</td><td>" + ds[1][i].addtime + "</td></tr>";

                    }
                }
                mystr += "</table>";

            }
        }
    });

    if (floatInfo.indexOf(mystr) < 0) {
        floatInfo[houseId] = mystr;
    }
    return mystr;
}
//JS缓存
function JS_FloatInfo(houseId) {
    mystr = floatInfo[houseId];
    return mystr;
}

//显示浮窗
function showFloat(e, mystr) {
    var pX = 150; var pY = 60;
    if (mystr == "<div style='color:#ffffff;'>无精耕数据</div>") {
        pX = 50;  pY = 60;
    }

    $("span[name='houseView']").mousemove(function (e) {
        $('#flckdiv').eq($(this).index()).show().css({
            "top": e.pageY - pX,
            "left": e.pageX + pY
        })


    }).mouseleave(function (e) {
        $('#flckdiv').hide();
    });
}

//房源浮窗
$(function () {

    $("#tb_commlist").on("mouseover", "span[name='houseView']", function (e) {
        var houseId = $(this).attr('data-id');
        FloatInfoById(houseId, e)

    });

})

 

转载于:https://www.cnblogs.com/fyssl/p/10525011.html