easyUI datagrid 行内容超过添加(...)

转载注明地址:

之前效果:



之后效果:



需要说明一点的是,这个不是通过JS设置长度完成的,如果是JS那么用户拖动变宽之后,还需要监听变宽之后的情况,那么显的很麻烦

一下就来说明如何完成的:

第一步,用FF看easyUI结构;



那么下面就看看主要的代码:(仅仅几行而已)

$('#grid').datagrid({
onLoadSuccess:function(data){
var div01=$("td[field='clinictotal'] div");

div01.css({
"width":div01.width(),
"white-space":"nowrap",
"text-overflow":"ellipsis",
"-o-text-overflow":"ellipsis",
"overflow":"hidden"
});

}});

$('#grid')

代表你的grid,是不是很简单!

下面来解释一下具体的意思:

white-space: nowrap;
width: 100%;                   /* IE6 needs any width */
overflow: hidden;              /* "overflow" value must be different from "visible" */
-o-text-overflow: ellipsis;    /* Opera 9-10 */
text-overflow:    ellipsis;    /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */