The specific extension method is as follows:
/**
* Datagrid extension method tooltip is based on Easyui 1.3.3, available for Easyui1.3.3+
* Simple implementation, if you need advanced functions, you can freely modify
* Instructions for use:
* Import this js after easyui.min.js
* Code case:
* $("#dg").datagrid({....}).datagrid('tooltip'); 所有列
* $("#dg").datagrid({....}).datagrid('tooltip',['productid','listprice']); 指定列
* example:
* Add the following code to onLoadSuccess
onLoadSuccess: function(data) {
$(this).datagrid('tooltip',['name','title']); //The data will be displayed floating if the data is too long
}
* @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');
});
}
}
});