【问题标题】:column formatter for JSON dataJSON 数据的列格式化程序
【发布时间】:2020-12-23 11:51:17
【问题描述】:

我正在尝试使用 Tabulator 并找到正确的格式化程序来显示 JSON 对象。 如果我将它作为 JSON 传递,则单元格显示 [Object, Object] 并且如果我在将其作为长文本( textarea )之前对其进行字符串化 是否有任何内置的 JSON 数据类型格式化程序?有没有办法将数据显示为 JSON 对象。 谢谢

【问题讨论】:

  • 使用JSON.stringify(data,null,4)

标签: javascript json tabulator


【解决方案1】:

要基于 Nilesh 的建议,您需要创建一个实现 JSON.stringify 函数的格式化程序和部分内置 textarea 格式化程序:

function jsonFormatter(cell, formatterParams, onRendered){
    cell.getElement().style.whiteSpace = "pre-wrap"; //allow cell to take up multiple lines of text

    return JSON.stringify(cell.getValue(),null,4); //return JSON formatted cell
}

当您随后将格式化程序附加到列定义中的列时,您还需要将 variableHeight 选项设置为 true 以告诉 Tabulator 此单元格可以根据其内容更改高度,这是需要确保在调整表格/列大小时正确绘制单元格

{title:"Example", field:"example", formatter:jsonFormatter, variableHeight:true}

【讨论】:

  • 感谢您的回复。这实际上开始为我解决问题。是否可以用 HTML 替换或填充单元格元素? ( react/svelte components ) 还是格式化程序只返回数据值
  • 如果您想将 html 从其值直接传递到单元格中,您可以使用内置的 'html' 格式化程序
  • 您也可以从格式化程序中返回 Dom 节点,它会将其添加到单元格中
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-12-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-09-24
相关资源
最近更新 更多