EasyUI datagrid数据表格单元格内允许换行 解决单元格内纯数字或英文文本不能换行问题

官方的数据表格属性中提供了nowrap属性

其作用是:设置为 true,则把数据显示在一行里。设置为 true 可提高加载性能。

默认为true

在设置数据表格属性时将nowrap属性设置为false时,并且设置表格的宽度,当单元格内数据内容超过宽度时就会自动换行

{
    field : 'khmc',
    title : '生产线',
    align : 'center',
    halign : 'center',
    width:50,
},

但是当数据单元格内的文本为纯数字或者英文时不能换行,或出现内容被截断的现象

如图:

此时就需要重新定义一下单元格内文本的格式

{
    field : 'pfhm',
    title : '配方编码',
    align : 'left',
    halign : 'center',
    width:50,
    formatter : function(value, row, index) {
        return '<div style="word-break:break-all; word-wrap:break-word;white-space:pre-wrap;">'+ value + '</div>';
    } 
},

用带有以下样式的div标签对包裹文本内容确保内容都会换行

允许在单词内换行:word-break:break-all;

在长单词或 URL 地址内部进行换行:word-wrap:break-word;

保留空白符序列,但是正常地进行换行:white-space:pre-wrap;

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章