easyui Datagrid方法扩展 - tooltip

easyui Datagrid方法扩展 - tooltip

最新版本的jQuery Easyui新出来了一个组件叫tooltip，就是提示框。以前的版本没有这个组件的时候就有很多在问，datagrid的单元格，我要加鼠标提示要怎么做。原来我告诉他们的方法都是用formatter，大概方法如下：

1 2 3 4 5

formatter: function (value){        return  '<span title="' +value+ '">' +value+ '<span>' ;   }

　　

这样的方式就利用了浏览器自己的title特性，来达到显示效果。只是这种实现效果还不是非常里想。值得庆幸的是从1.3.3+的版本之后有了tooltip组件我就可以更进一步的自定义我们的提示信息了。

具体扩展方法如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

/** * Datagrid扩展方法tooltip 基于Easyui 1.3.3，可用于Easyui1.3.3+ * 简单实现，如需高级功能，可以自由修改 * 使用说明: * 在easyui.min.js之后导入本js * 代码案例: * $("#dg").datagrid({....}).datagrid('tooltip'); 所有列 * $("#dg").datagrid({....}).datagrid('tooltip',['productid','listprice']); 指定列 * @author ____′gbq */ $.extend($.fn.datagrid.methods, { tooltip : function (jq, fields) { return jq.each(function () { var panel = $(this).datagrid('getPanel'); if (fields && typeof fields == 'object' && fields.sort) { $.each(fields, function () { var field = this; bindEvent($('.datagrid-body td[field=' + field + '] .datagrid-cell', panel)); }); } else { bindEvent($(".datagrid-body .datagrid-cell", panel)); } }); function bindEvent(jqs) { jqs.mouseover(function () { var content = $(this).text(); if(content){ $(this).tooltip({ content : content, trackMouse : true, onHide : function () { $(this).tooltip('destroy'); } }).tooltip('show'); } }); } } });

效果如下，样式可自行调整

　

　参考：http://www.jeasyuicn.com/the-extended-datagrid-method---tooltip.html