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

48次阅读

共计 593 个字符,预计需要花费 2 分钟才能阅读完成。

官方的数据表格属性中提供了 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;

正文完
 0