easyui datagrid 的 tip实现

墨蓝 2023-10-16 22:53 41阅读 0赞

前篇关于easyui datagrid的一些知识在这里可以找到：[http://blog.csdn.net/tiantang\_1986/article/details/40983675][http_blog.csdn.net_tiantang_1986_article_details_40983675]

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

示例：

![Center][]

鼠标放上去即会显示一些信息，这些信息是通过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'
                });
            }
        });
    });

[http_blog.csdn.net_tiantang_1986_article_details_40983675]: http://blog.csdn.net/tiantang_1986/article/details/40983675
[Center]: https://img-blog.csdn.net/20160118162039564?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center