2014-10-07 177 views
0

我从我的BD检索数据,并试图在我的网格上显示它。问题是,当我有一个很长的文字:长文本自动调整列大小

enter image description here

正如你可以在图片中看到,“BBBB ...”,使列调整,它就会变得混乱。我试图使用文本包装来实现许多SO的解决方案,但没有成功,即this one

这里是我的代码:

$("#grid_user").jqGrid({  
    url: 'user.jsp', 
    datatype: 'json', 
    pager: '#pager_user', 
    rowNum: 10, 
    rowList: [10,20,30], 
    autoencode: true, 
    height: 250, 
    autowidth: true, 
    gridview: true,. 
    viewrecords: true,. 
    caption: "Usuários", 
    colNames:['Código','Nome','Perfil','Ativo','Data Inclusão','Login','Senha','Confirma Senha','Email','Grupos','Grupos'], 
    colModel:[          
     {name:'id', width:100, sortable:false, editable: true, editrules: { edithidden: true }}, 
     {name:'name', width:120, editable: true, editrules:{required:true}}, 
     {name:'profile', width:80, editable: true, edittype:'select', editoptions:{value:{ADMINISTRADOR:'Administrador',GESTOR:'Gestor',EXECUTOR:'Executor'}}, editrules:{required:true},sortable:false}, 
     {name:'active', width:40, editable: true, edittype:'select', editoptions:{value:{1:'Sim',2:'Não'}}, editrules:{required:true},sortable:false},  
     {name:'creationDate', width:80, sortable:false, sorttype:"date", datefmt: 'd/M/Y', editable: false}, 
     {name:'login', width:120, sortable:false, editable: true, editrules:{required:true}}, 
     {name:'password', width:80, sortable:false, editable: true, hidden:true, edittype:'password', editrules:{edithidden:true, required:true, custom:true, custom_func:validatePassword}}, 
     {name:'confirmPassword', width:80, sortable:false, editable: true, hidden:true, edittype:'password', editrules:{edithidden:true, required:true}}, 
     {name:'email', width:150, sortable:false, editable: true, editrules:{required:true, email:true}}, 
     {name:'groups', width:80, sortable: false, editable: false, hidden: true}, 
     {name:'groupDescription', width:200, sortable: false, editable: true, edittype:"textarea", editoptions:{ rows:"3", cols:"21", readonly: 'readonly' }} 
    ]}); 

CSS

.ui-jqgrid tr.jqgrow td { 
     word-wrap: break-word; /* IE 5.5+ and CSS3 */ 
     white-space: pre-wrap; /* CSS3 */ 
     white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 
     white-space: -pre-wrap; /* Opera 4-6 */ 
     white-space: -o-pre-wrap; /* Opera 7 */ 
     overflow: hidden; 
     height: auto; 
     vertical-align: middle; 
     padding-top: 3px; 
     padding-bottom: 3px 
    } 

如何设置一个固定的宽度列,以便文本乱不起来?

回答

1

使用此

{ 
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ 
white-space: -pre-wrap; /* Opera 4-6 */ 
white-space: -o-pre-wrap; /* Opera 7 */ 
white-space: pre-wrap; /* css-3 */ 
word-wrap: break-word; /* Internet Explorer 5.5+ */ 
word-break: break-all; 
white-space: normal; 
} 
+0

我试图'word换行:打破-word',但它只是生效,如果我有字与字之间的空间。对于单行字它不起作用 – lucasdc 2014-10-07 20:28:24

+0

没有设置desplay:阻止td? – 2014-10-07 20:30:53

+0

请参阅本http://jsfiddle.net/e9bjxe33/ – 2014-10-07 20:31:09