datagrid 溢出文本显示省略号

最新推荐文章于 2023-08-25 10:17:24 发布

转载最新推荐文章于 2023-08-25 10:17:24 发布 · 7.9k 阅读

标签

#datagrid 溢出文本显示省略号

收录于

毛草屋专栏收录该内容

192 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在EasyUI的Datagrid中实现溢出文本显示省略号的功能，只需添加特定的CSS样式即可，同时探讨了该方案在不同浏览器的兼容性情况。

比较容易实现的一个功能，在easyui的主题css后面载入这段css就ok了。

.datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber{
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
}

浏览器兼容状况

Browser	Lowest Version	Support of
Internet Explorer	6.0	text-overflow
Firefox (Gecko)	7.0	text-overflow
Opera	9.0	-o-text-overflow
Safari (WebKit)	1.3 (312.3)	text-overflow

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

光辉记忆

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
7
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

miniui中datagrid表格当前行根据下拉框的值去改变当前行某一列的编辑状态及配置相对应的值

qq_45846870的博客

01-15

2293

例如这个需求（下图）：注：因为这个问题困扰了我一个星期，现在已经解决掉，我把它记录一下，因为我自己也在网上找了，当作是我自己的总结吧。（1)上图，‘产品名称’关联OA存货档案,当【产品属性】为【主机】、【板材】、【LED灯】时，必须选择，当【产品属性】是【配件】时可编辑配件名称。（2)上图，‘防伪码’删除，改为‘产品属性’，并设为选择器(产品主机、配件、板材、LED灯)，数据联动：当产品属性=配件或板材或LED灯时，数量默认空，必填。当产品属性=产品主机时，数量默认1，不可编辑前台HTML界面 &l

7 条评论您还未登录，请先登录后发表或查看评论

easyUI中 datagrid 一列字比较多时，出现省略符号

热门推荐

zhenzhang234的专栏

01-09

1万+

当数据比较多为，出现省略符号，需修改easyui样式（样式必须在easyui自带的后面，重写） .datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber { text-ov

kendo grid标题超出部分显示省略号

风轻云断的博客

02-26

2443

kendo grid标题超出部分显示省略号,为table设置样式 [role="grid"]/* header + data table */ { table-layout: fixed; } 超出一行显示省略号 .line-limit-one { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //文本...

怎么设置GridView的单元格在内容显示超过长度的时候用省略号代替而不是换行当鼠标移上去的时候将影藏的内容提示出来

single_killer的专栏

12-25

3897

最简单的可以通过CSS来设置省略号, 鼠标移上全部显示用ToolTip, 1.CSS: .mlength { display: block; width: 100px; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: e

DataGrid应用（二） —— 滚动条的设计

Lullaby's Blog

12-13

8272

为DataGrid加上滚动条，众所周知可以通过嵌套在里来实现。我先总结一下这些方法：1. 利用div的overflow的特性，我们可以设计出表格的滚动条。但是我们通常需要一个固定不动的表头，因为整个datagrid放在div中，无法使表头固定不动。（方法二，可以利用css固定)，我们设计需要另一个来作为表头，同时，将由div包含着的datagrid的表明细行对齐表头，形成完整的

dataGrid 的单元格文本溢出显示省略号的效果

qq_25717027的博客

09-04

2037

1.找到对应的easyui的themes的easyui.css，查找.datagrid-cell,.datagrid-cell-group,.datagrid-header-rownumber, .datagrid-cell-rownumber等class 追加 text-overflow:ellipsis; 如果没有找到添加完整的 .datagrid-cell, .datag

datagrid 溢出文本显示省略号 转载

ading0210的博客

10-24

261

http://www.jeasyuicn.com/?sort=3.datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber{ -o-text-overflow: ellipsis; text-overflow: ellipsis; } 转载于:https:...

easyui datagrid溢出文本显示省略号

kuroshiro的博客

08-25

196

【代码】easyui datagrid溢出文本显示省略号。

easyui datagrid单元格实现溢出文本显示省略号的效果。

一万个小时

12-26

3632

CSS： css代码： .datagrid-btable .datagrid-cell{padding:6px 4px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;} Column: JS代码：formatter: function(value,row,index){ return ''+val

文本内容超长显示省略号，鼠标移上自动显示全部内容（适用于EasyUI DataGrid）...

weixin_30765505的博客

06-09

801

在日常处理表格时，经常会遇到按正常列宽无法全部显示的超长文本，有时候客户会要求显示成省略号，鼠标移上才显示全部文本。本文主要是以EasyUI的DataGrid为案例，介绍省略号的解决方案，其他场景只要能将文本用DIV包裹住，应该都能使用。首先在JS中定义一个fomatter函数，将单元格的文本用div包裹住，然后在EasyUI DataGrid的列定义中使用该fomatter函数。 ...

easyui datagrid 单元格内文本超出长度显示省略号

weixin_34399060的博客

10-30

1456

2019独角兽企业重金招聘Python工程师标准>>> ...

EasyUI datagrid单元格文本超出显示省略号，鼠标移动到单元格显示文本

星空月零的博客

10-30

4235

另一种：https://blog.csdn.net/weixin_42402763/article/details/88948879 nowrap : true; 是前提 $('#×××').datagrid({ nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取 }); 省略号样式： <style type="text/c...

datatables列内容超长处理

weixin_30945039的博客

11-27

1351

css示例： .gridtitle{ 　　text-overflow:ellipsis;/*超长部分以...代替*/ 　　white-space: nowrap;/*文本不换行*/ 　　max-width:200px;/*最大宽度*/ 　　overflow: hidden;/*超长部分隐藏掉*/ 　　} datagrid初始化时列属性处理： columns : [//对应上面the...

easyui给单个单元格里面的元素添加样式

C赏心悦目

11-07

1327

onLoadSuccess: function (data){ var panel = $('#{$namespace}inList').datagrid('getPanel'); var tr = panel.find('div.datagrid-body tr'); tr...

datagrid行数据溢出时使用省略号代替

u011716788的博客

03-04

427

当datagrid定义为：nowrap: false不换行时，行中数据太多使用省略号代替： .datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber{ -o-text-overflow: ellipsis; text-overflow: elli...

jQuery EasyUI

weixin_34419326的博客

10-18

datagrid单元格数据过长时的显示省略号 网络上很多的方法，均需要改动部分EasyUI的源码或样式，这种做法虽然也是可以，但个人觉得，改动框架的源代码并不是一种非常好的方式，为此改用datagrid自带的formatter方法进行了实现： 1 {field: 'test',title: '测试',width:100,align:'center',formatter: function(...