Easyui datagrid 设置内容超过单元格宽度时自动换行显示

Posted shouke

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Easyui datagrid 设置内容超过单元格宽度时自动换行显示相关的知识,希望对你有一定的参考价值。

datagrid 设置内容超过单元格宽度时自动换行显示

by:授客 QQ:1033553122

 

测试环境

jquery-easyui-1.5.3

 

问题描述

单元格内容超过单元格宽度不会自动化换行。如下:

图1:

 技术分享图片

 

 

图2:

 技术分享图片

 

 

解决方法

定义表格时,设置nowrap属性为false.

<table id=‘tt‘ class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:500px" data-options="

            ……

            nowrap:false">

        <thead>

        ……

        </thead>

</table>

 

不足的是,设置为nowarp 可以做到换行显示,不足的是,单个英文单词很长的情况下,不会换行显示,遇到数字串也不会换行显示,如上图2

 

注:

nowrap boolean 设置为 true,则把数据显示在一行里。设置为 true 可提高加载性能。

 

改进方案

添加以下CSS样式

<style>

        xmp {

            white-space: pre-wrap;

            word-wrap: break-word;

        }

    </style>

 

同时,把要展示的数据放 <xmp> 元素标签中,形如<xmp> data to display </xmp>

 技术分享图片

 

 

说明:

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

word-wrap: break-word;  允许长单词换行到下一行。类似的还有word-wrap: break-all; 如果该行已不能容纳整个单词(还可以容纳单词的部分),允许长单词被分成两部分,一部分在上一行,剩余部分放下一行开头显示。

 

展示效果如下

 技术分享图片

 

 

以上是关于Easyui datagrid 设置内容超过单元格宽度时自动换行显示的主要内容,如果未能解决你的问题,请参考以下文章

easyui怎么给某一单元格,点击保存前后颜色改变

EasyUI DataGrid 编辑单元格

EasyUi DataGrid中数据编辑方式及编辑后数据获取,校验处理

EasyUI DataGrid 编辑单元格

easyui前台改变datagrid某单元格的值

我的easyui有一个datagrid,我想点击datagrid的一个单元格,让那个单元格的值改变,可以帮我解答一下吗?