有时候使用表格时因为有一个字段内容过多导致的表格被撑大,如下图:
当然easyui datagrid 的nowrap属性默认为true,为true时在一行中显示数据,如下图:
但这样无法看到全部的内容,用户体验不好。
这时我们可以用以下方法来优化显示效果。
以下为easyui扩展代码(已标明转载,再次感谢孙宇、夏悸无私分享)
<script type="text/javascript">
/**
* grid tooltip参数
*
* @author 孙宇
*/
var gridTooltipOptions = {
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.replace(/(^\s*)|(\s*$)/g, '').length > 5) {
$(this).tooltip({
content : content,
trackMouse : true,
position : 'bottom',
onHide : function() {
$(this).tooltip('destroy');
},
onUpdate : function(p) {
var tip = $(this).tooltip('tip');
if (parseInt(tip.css('width')) > 500) {
tip.css('width', 500);
}
}
}).tooltip('show');
}
});
}
}
};
/**
* Datagrid扩展方法tooltip 基于Easyui 1.3.3,可用于Easyui1.3.3+
*
* 简单实现,如需高级功能,可以自由修改
*
* 使用说明:
*
* 在easyui.min.js之后导入本js
*
* 代码案例:
*
* $("#dg").datagrid('tooltip'); 所有列
*
* $("#dg").datagrid('tooltip',['productid','listprice']); 指定列
*
* @author 夏悸
*/
$.extend($.fn.datagrid.methods, gridTooltipOptions);
/**
* Treegrid扩展方法tooltip 基于Easyui 1.3.3,可用于Easyui1.3.3+
*
* 简单实现,如需高级功能,可以自由修改
*
* 使用说明:
*
* 在easyui.min.js之后导入本js
*
* 代码案例:
*
* $("#dg").treegrid('tooltip'); 所有列
*
* $("#dg").treegrid('tooltip',['productid','listprice']); 指定列
*
* @author 夏悸
*/
$.extend($.fn.treegrid.methods, gridTooltipOptions);
</script>
效果如下图所示:
使用方法很简单,只需要在datagrid的onLoadSuccess方法中加一行代码: $(this).datagrid('tooltip');
onLoadSuccess : function() {
$(this).datagrid('tooltip',['attr1']);
}