easyui Datagrid方法扩展 - tooltip

Posted 2020-06-24 liujufu

最新版本的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‘);
			});
		}
	}
});

　　原文地址：http://www.jeasyuicn.com/the-extended-datagrid-method---tooltip.html