easyui datagrid 的 tip实现

简介: easyui datagrid 的 tip实现


这里介绍一下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'
            });
        }
    });
});
相关文章
|
2月前
EasyUI datagrid 从左至右递归合并表格
EasyUI datagrid 从左至右递归合并表格
15 2
|
2月前
EasyUI DataGrid 假分页
EasyUI DataGrid 假分页
15 0
|
18天前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
2月前
|
JSON 监控 数据格式
Easy UI datagrid的学习
Easy UI datagrid的学习
|
5月前
Easyui datagrid 编辑结束时combobox显示value而不显示text
Easyui datagrid 编辑结束时combobox显示value而不显示text
|
5月前
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
EasyUI中datagrid的行编辑模式中,找到特定的Editor,并为其添加事件
|
5月前
EasyUI DataGrid 可编辑列级联操作
EasyUI DataGrid 可编辑列级联操作
|
5月前
easyui datagrid reload后自动全选解决
easyui datagrid reload后自动全选解决
|
5月前
EasyUI Datagrid 分页事件
EasyUI Datagrid 分页事件
|
5月前
|
JavaScript
EasyUI的datagrid每行数据添加操作按钮的方法
EasyUI的datagrid每行数据添加操作按钮的方法
132 0