您的位置:首页 > 产品设计 > UI/UE

easyui中datagrid单元格实现字数超限显示省略号的效果总结

2017-01-10 15:10 260 查看
看网上写的比较简单,我刚好也做到了现在来做一个总结先要把你导入的css样式修改了

<link href="js/easyui1.4.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
找到你引入的easyUI的地址然后点开easyUI,CSS文件在文件最后面加入这一句话
.datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber{
text-overflow: ellipsis;
}

然后此处是重点 有些朋友说加入这句话不成功,是不是下面nowrap没有修改的原因

title: '',
loadMsg: '数据加载中,请稍候...',
nowrap: true,


记住了 nowrap一定要修改成true,因为这个参数如果是false的话默认是超限的字数是换行的,

然后在你想换行的字段后面加上,下面这段方法就可以实现 鼠标放在上面显示隐藏的字数了

{ field: 'title', title: '文章标题', width: 200,formatter: function(value,row,index){
return '<span title='+value+'>'+value+'</span>';
}},

好了,总结完毕。开始工作,革命尚未成功,通知仍需努力
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: