制表符 - 如何在格式化程序中创建多行文本：“链接”答案

【问题标题】：Tabulator - how to create multi-line text in formatter:"link"制表符 - 如何在格式化程序中创建多行文本：“链接”
【发布时间】：2020-04-04 13:06:27
【问题描述】：

我使用http://tabulator.info 并希望在表格单元格中有一个 html 链接。我使用formatter:"link"，一切正常：

{title:"Reference", field:"ref", headerSort:false, formatter:"link",  variableHeight:true, formatterParams:{labelField:"name", target:"_blank", urlField:"link",  urlPrefix:"articles/"}, width:"185"},

但来自labelField 的文本不是多行的，例如formatter:"textarea" 可能。 html链接可以多行吗？

谢谢，瓦迪姆

【问题讨论】：

标签： tabulator

【解决方案1】：

非常感谢您的回答，但似乎我不太擅长使用自定义格式化程序来做到这一点......所以我发现了这个：Linebreaking of links 和那个：

 .tabulator-row .tabulator-cell a {
        white-space: pre-wrap;
    }

有效。再次感谢！

【讨论】：

【解决方案2】：

我已经成功使用Custom Formaters 创建多行行。要点是自定义格式化程序在数据进入表格时被调用，单元格作为参数传递。您可以从中提取单元格数据 (cell.getValue()) 并根据需要对其进行操作。至少这就是我正在根据包含的数据将Font Awesome 图标添加到各个行的操作。我使用Handlebars 格式化HTML sn-p 并在调用自定义格式化程序函数时返回它

无论如何，我不确定我是否了解您需要做什么，但也许这会有所帮助。

let eventTableItemMediaScript = `
<div>{{eventTitle}}</div>
<div class="d-flex justify-content-between mr-1">
<small>
{{eventDate}}
</small>
<i class="{{iconName}}" style="color:{{iconColor}}"></i>
</div>
`
let eventTableItemMediaTemplate = Handlebars.compile(eventTableItemMediaScript);

来自文档

{title:"Name", field:"name", formatter:function(cell, formatterParams, onRendered){
    //cell - the cell component
    //formatterParams - parameters set for the column
    //onRendered - function to call when the formatter has been rendered

    return "Mr" + cell.getValue(); //return the contents of the cell;
    },
}

【讨论】：