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

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

忘-恋

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

阅读量1w

点赞数 3

分类专栏： easyUI 文章标签： easyUI中 datagrid 一列字出现省略符号

本文链接：https://blog.youkuaiyun.com/zhenzhang234/article/details/42552935

版权

easyUI 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在EasyUI的Datagrid组件中处理数据溢出问题，包括通过修改CSS样式实现文本溢出省略显示，并提供两种实现鼠标悬停时显示完整文本的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当数据比较多为，出现省略符号，需修改easyui样式（样式必须在easyui自带的后面，重写）

<style type="text/css">
.datagrid-cell, .datagrid-cell-group, .datagrid-header-rownumber, .datagrid-cell-rownumber
{
text-overflow: ellipsis;
}
</style>

为了出现鼠标放入的提示框，需要修改js文件，文件夹中的js

js修改后的文件

第一种方法

datagrid 中的使用 <th data-options="field:'Remark2',width:100,nytitle:true">备注2</th>

第二种方法

自己写js ：（1）写一个div
<div id="titie" style="position: absolute; top: 500px; width: auto; background-color: #E7F3FF; display: none; z-index: 100000; border: 1px solid #e1e3e4; padding: 5px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px;">
</div>

（2）给数据列中加一个span标签，标签里添加鼠标进入和移除事件
<th data-options="field:'Remark3',width:100,formatter:rowformaterdir">备注3</th>

function rowformaterdir(val, row) {
if (val == null || val == 0)
return '';
else (val != 0 || val == 0)
return "<span οnmοuseοver=\"CreateDiv(' " + val + "')\" οnmοuseοut=\"RemoveDiv('" + val + "')\">" + val + "</span>";
}

function CreateDiv(val) {
var e = window.event
// //这里可得到鼠标X坐标
var pointX = e.pageX;
//这里可以得到鼠标Y坐标
var pointY = e.pageY;

$("#titie").css("top", pointY + 20);
$("#titie").css("margin-left", pointX);
$("#titie").html("<span>" + val + "</span>");
$("#titie").show();
}

function RemoveDiv(val) {

$("#titie").hide();

}