这里介绍一下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' }); } }); });