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

最新推荐文章于 2022-02-24 09:46:49 发布

原创最新推荐文章于 2022-02-24 09:46:49 发布 · 4.1k 阅读

3 ·

CC 4.0 BY-SA版权

EasyUI 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种在Datagrid中处理单元格文本溢出的方法，通过使用nowrap属性和CSS样式实现文本自动截断并显示省略号。同时提供了鼠标悬停时显示完整文本的JavaScript函数，确保了良好的用户体验。

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

另一种：https://blog.youkuaiyun.com/weixin_42402763/article/details/88948879

nowrap : true; 是前提

$('#×××').datagrid({
    nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取        
});

省略号样式：

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

鼠标移动到单元格显示文本

代码1：

function show1(val,row){
    if (val){
        return '<span style="font-size:15px" title="' + val + '">' + val + '</span>';
    } else {
        return val;
    }
}

代码2：

function show2(value, row, index){
    var content = '';
    if(value != undefined && value != '' && value != null ){ 
        var abValue = value +'';
        content = '<a style="font-size:15px" href="javascript:void(0);"  title="' + abValue + '" class="easyui-tooltip">' + abValue + '</a>'; 
    }   
    return content;
}