在 Tabulator 中对截断文本使用自定义省略号

Question

我使用 Tabulator 组件，我需要将常规省略号 (...) 替换为自定义。然后我想为他们添加点击事件。主要思想 - 用户可以单击自定义省略号（或字形），然后将为他显示带有全文和复制按钮的模态 window。

大多数浏览器不支持自定义字符串作为省略号，所以我不能使用 CSS 属性.

我想我可以使用 Tabulator 格式化程序功能添加一些字形并处理对该字形的点击，但在这种情况下我遇到了另一个问题："how check text is truncated".

请就此给出建议 - 在 Tabulator 单元格中自定义省略号。

Answer 1

您需要使用 Custom Formatter 来实现。

因为在将元素添加到 DOM 之前会调用格式化程序函数，所以如果单元格在绘制后溢出，您将需要使用传入函数的 onRendered 回调来触发省略号的显示:

//custom formatter
var ellipsisFormatter = function(cell, formatterParams, onRendered){
    onRendered(function(){
        var element = cell.getElement();

        if(element.scrollWidth > element.clientWidth){
            //add ellipsis
        }else{
            //hide ellipsis
        }
    });

    return cell.getValue();
});

//column definition
{title:"Name", field:"name", formatter:ellipsisFormatter},

在 Tabulator 中对截断文本使用自定义省略号

Using custom ellipsis for truncated text in Tabulator

tabulator