easyui datagrid 的 tip实现

本文主要是介绍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'});}});
});

这篇关于easyui datagrid 的 tip实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---