做项目使用easyUI组建的datagrid组件的时候经常会遇到需要展示详细文本信息的情况,这个时候表格里面有可能一行难以放下所有文本内容,这就必须要换行才可以,网上有很多提到使用属性:nowrap:false,我尝试了几次,然并卵。后来发现,这里只需要添加一个fomatter格式就可以了,具体代码如下(附部分其他代码,方便理解和使用)
$('#pg').datagrid({
url:'${ctx}/product?md=findByPage',
columns:[[
{field:'id',title:'id',width:60, align:"center"},
{field:'desc',title:'描述',width:100,nowrap:true,
formatter: function (value,row,index) {
return '<div style="width=100px;word-break:break-all; word-wrap:break-word;white-space:pre-wrap;">'+value+'</div>';
}
}, //这个函数用来解决换行问题,直接使用这个函数就可以了
{field:'price',title:'价格',width:30, align:"center"},
{field:'hot',title:'是否热门',width:10, align:"center",
formatter: function(value,row,index){
if (value==1){
return "是";
}else{
return "否";
}
},
},
{field:'image',title:'图片',width:60,align:"center",
formatter: function(value,row,index){
return "<img src='${ctx}/"+value+"' width='60px'>";
}
}
]],
fit:true,
fitColumns:true,
pagination:true
});