如何在一个单元格中添加多个对象？答案

【问题标题】：How to add multiple objects in a cell?如何在一个单元格中添加多个对象？
【发布时间】：2021-06-23 03:35:52
【问题描述】：

希望你做得很好！

我必须使用 gridjs 在同一个单元格中插入多条记录。有人可以帮我吗？

假设这是我的 api 的示例响应

{"results": [{"Program": "Sample Program", "Show": "Sample Show Hello", "Edition": 
"Edition Name", "Venue": "Venue Name", "Start_Time": "Start Time", "End_Time": "End 
Time", "Partner": "Partner", "Artist": ["Artist 1", "Artist 2"]}]}

如您所见，我有多个艺术家。现在这是我的网格代码

var x = new gridjs.Grid({
  columns: ["Program","Show","Edition", "Venue", "Start Time","End Time","Partner","Artist"],
  pagination: {
    limit: 4
  },
  search: true,
  sort: true,
  server:{
    url: 'http://127.0.0.1:8003/1/',
    then: data => data.results.map(show => 
      [show.Program, show.Show, show.Edition,show.Venue,show.Start_Time,show.End_Time,show.Partner,show.Artist]
    )
  },
}).render(document.getElementById("wrapper"));

并且网格在同一列中显示艺术家 1 和艺术家 2。请查看参考图片。

在我的单元格中，我需要像 Artist 1 这样的输出
Artist 2

我真的很感激任何线索！

【问题讨论】：

标签： javascript gridjs

【解决方案1】：

在show.Artist 的末尾添加一个.toString()，它会将数组转换为逗号分隔的字符串。执行.toString().replace(',' '\n')，它会将它们分成不同的行。

顺便说一句，我维护gridjs-vue。 ?

【讨论】：

谢谢你的回答，但是在我的 html 结尾 \n 被转换为空格而不是换行

【解决方案2】：

我是这样搞定的——

colums:[
....
{
name : "Artist",
formatter: (cell) =>{
    return gridjs.html(cell)
},},....]

---- 
server :{
url : '#url....'
then: data => data.result.map(show => [...,
show.Artist.toString().replace(',','<br />') ..]
}

【讨论】：

感谢您的帮助。我刚刚开始使用 gridjs，它确实很有趣。