easyui datagrid 的 tip实现

前篇关于easyui datagrid的一些知识在这里可以找到：http://blog.csdn.net/tiantang_1986/article/details/40983675

这里介绍一下easyui datagrid 中的tooltip 实现。

示例：



鼠标放上去即会显示一些信息，这些信息是通过ajax拿到后台的数据，定义一列数据，其class="easyui-tooltip"，绑定 mouseenter 事件，

获取当前鼠标所在行取得数据的查询条件，传到后台，获取数据，数据组装成html代码，然后展示出来。

$('.easyui-tooltip').live("mouseenter",function(e){
    e.stopPropagation();
    var index=$(this).parents("tr").index();
    var row = $('#dg').datagrid('getData').rows[index];
    var address=row.address;
    var dataStr;
    $.ajax({
        type : 'POST',
        url : 'getAction.do',
        async : false,
        data : {
            address : address
        },
        dataType : "html",//"xml", "html", "script", "json", "jsonp", "text"
        success : function(data, status) { //成功返回之后调用的函数
            if (status == "success") {
                if(data!="failed"){
                    dataStr=data;
                }
            }
        }
    });
    if(!dataStr)return;
    $(this).tooltip({
        position: 'top',
        content: '<span style="color:#fff;">'+dataStr+'</span>',
        onShow: function(){
            $(this).tooltip('tip').css({
                backgroundColor: '#aaa',
                borderColor: '#999',
                'text-align': 'left'
            });
        }
    });
});