easyui dataGrid 设置了nowrap:false 却没有换行

演示问题:

问题描述:
格式化数据后因数据太长,无法在一行显示,在一行显示后发现数据过长,只好选择DataGrid组件的nowrap属性(ps:设置在列属性无效),可发现设置了该属性后过长的数据仍然被截取了,这是为何???

问题分析:
查阅资料后发现: nowrap属性对于英文字母,数字无效,设置列宽度,也不能自动换行。换行要求一个汉字/单词为单位,上述情况单词是由多个字符拼接而成无法识别;
ps: 如果想让数据在一行显示,可固定列属性 fixed:true

<th data-options="field:'permissions',width:'30%',align:'center',formatter:perFormatter">所有权限</th>
<%--fixed:true 固定列宽在一行显示,需要去掉width--%>

解决问题:
1_先设置nowrap:false

<table id="dg" class="easyui-datagrid" data-options="nowrap:false" />

在th>field 中设置无效:

<th data-options="field:'sn',width:'10%',align:'center'">角色编码</th>

2_将格式化后的数据放入如下样式的div中
允许单词内换行：word-break:break-all;
允许在长单词或url地址内部进行换行：word-wrap:break-word;
保留空白符序列,也能正常地进行换行：white-space:pre-wrap;

/*v 值,r 行, i 索引*/
function perFormatter(v,r,i){var arr = [];$.each(r.permissions, function (i,o) {arr[i] = o.sn;});//使用该样式的div标签包裹的文本都会换行return '<div style="word-break:break-all; word-wrap:break-word;white-space:pre-wrap;">'+ arr.toString() + '</div>';
}

easyui dataGrid 设置了nowrap:false 却没有换行相关推荐

easyUI datagrid 单元格数据的修改，保存，json 数据的转化
参考网址:http://www.jeasyuicn.com/easyui-datagrid-batch-edit-and-submit.html 参考资料:easyui demo,json.js $( ...
动态设置easyui datagrid URL
动态设置easyui datagrid URL $('#tt').datagrid({url:'website/jsp/servlet', queryParams:{method:'x ...
jquery easyui datagrid 分页详解
http://www.cnblogs.com/huozhicheng/archive/2011/09/27/2193605.html 由于项目原因,用了jquery easyui 感觉界面不错,皮肤样 ...
（easyui datagrid+mvc+json）之asp.net分页查询
最近在做分页查询的功能,在网上也翻看了不少,但是自己的吸收能力就差了好多,而且当时最大的想法就是,怎么就没有我想要的那种,既是easyui的,又要用mvc的架构,还要能够实现底层的分页传值,用.net ...
easyui datagrid 表头与数据错位
方法一:容易,实用的方法在jquery.easyui.min.js中查找到field.replace(/[\.|\s]/g, "-")在其后添加replace 例子:field. ...
easy-ui datagrid弹框显示选中行数据
1.CarUpdate.jsp (代码参考) <%@ page language="java" import="java.util.*" pageEnco ...
EasyUI Datagrid跨行跨列的需求
常规开发后台管理系统中遇到的列表查询,都是用到最基本的数据网格,不包括单元格合并,多列页眉,冻结列和页脚等需求.类似如下这个列表实现也很简单,引入相关的js.css文件,html标签定义展示的列,通 ...
easyui datagrid 表格动态隐藏部分列的展示
1.一套代码中,可能不同的项目情况都在用,但是可能不同的项目要求展示的datagrid列的内容并不一致,所以能够动态的显示部分datagrid列的内容. 即datagrid的中的某一列,这个项目要求显 ...
jquery easyui datagrid使用参考
创建datagrid 在页面上添加一个div或table标签,然后用jquery获取这个标签,并初始化一个datagrid.代码如下: 页面上的div标签: <div id="maga ...

easyui dataGrid 设置了nowrap:false 却没有换行

easyui dataGrid 设置了nowrap:false 却没有换行相关推荐

最新文章

热门文章