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 */