Datagrid方法扩展 - tooltip

Posted 2020-08-09 芜明-追星

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

 

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

 

 

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

具体扩展方法如下： 

/**
* Datagrid扩展方法tooltip 基于Easyui 1.3.3，可用于Easyui1.3.3+
* 简单实现，如需高级功能，可以自由修改
* 使用说明:
* 在easyui.min.js之后导入本js
* 代码案例:
* $("#dg").datagrid({....}).datagrid(‘tooltip‘); 所有列
* $("#dg").datagrid({....}).datagrid(‘tooltip‘,[‘productid‘,‘listprice‘]); 指定列
* @author ____′↘夏悸
*/
$.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();
$(this).tooltip({
content : content,
trackMouse : true,
onHide : function () {
$(this).tooltip(‘destroy‘);
}
}).tooltip(‘show‘);
});
}
}
});