tooltip 当用户将鼠标移动到元素上的时候,将会显示一个消息提示框。
1.绑定tooltip
$('#desc_table').datagrid({
// 加载成功后执行
onLoadSuccess : function(data) {
// div id="tbdiv " class="table"
$( '#tbdiv table').on('mouseover' ,
function(e) {
var dom = e.target;
if (dom.tagName == "DIV" && $(dom).text() != "" ) {
$(dom).tooltip({
position : 'top',
content : '<span style="">' + $(dom).text() + '</span>',
onShow : function() {
}
});
$(dom).tooltip( 'show');
}
delete dom;
});
}
});
2.对datagrid进行扩展
/**
* 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({
position : 'top',
content : content,
trackMouse : true,
onHide : function () {
$( this).tooltip( 'destroy');
}
}).tooltip( 'show');
});
}
}
});
调用时:如果时也可放在datagrid的
onLoadSuccess : function(data) {
$( '#desc_table').datagrid('tooltip' ,[
'metadatavermark','metadataname' ,
'metadatasemanticmark','metadataontologytag' ,'metadatabt'
]);
}