在网格.js中使用 HTML 填充单元格

Question

如何在网格.js中用HTML内容填充单元格？

Answer 1

首先导入html函数：

import { Grid, html } from "gridjs";

然后在formatter函数中或直接在data中使用它：

const grid = new Grid({
columns: [
{ 
name: 'Name',
formatter: (cell) => html(`<b>${cell}</b>`)
},
'Email',
{ 
name: 'Actions',
formatter: (_, row) => html(`<a href='mailto:${row.cells[1].data}'>Email</a>`)
},
],
data: Array(5).fill().map(x => [
faker.name.findName(),
faker.internet.email(),
null
])
});

还可以查看 https://gridjs.io/docs/examples/html-cells

Answer 2

我正在通过浏览器使用 gridjs CDN 实现， 我可以通过 gridjs 命名空间访问 html 函数来使用格式化程序，如下所示

{
name: "Action",
formatter: (cell) => {
return gridjs.html(`<a href="">update</a>`)
// return `Update button`
}
}

Answer 3

对我来说，我将脚本类型"text/javascript"设置为"module"。 然后我可以像这样使用"导入"=>

<script type="module">
import {
Grid,
html
} from "/Scripts/gridjs.production.es.min.js";

//then use html with formatter
{
name: "Actions",
formatter: (cell) => {
return html(`<a data-id=${cell} href="#"><span class="glyphicon glyphicon-pencil"></span>Edit</a>`)
}
}
</script>

Answer 4

您还可以修改通过服务或其他内容接收的数据，然后将其传递到 html ;)

import { Grid, html } from "gridjs";
const columns = [
{
id: 'difficulty',
name: 'Difficulté',
formatter: (cell) => {
const difficultyConverter = new DifficultyConverter()
const displayedDifficultyResults = difficultyConverter.getNameAndAssociatedClassName(cell, null)
return html(`<span class='badge ${displayedDifficultyResults.originClassToAdd}--active'>${displayedDifficultyResults.originName}</span>`)
}
},
{
id: 'community_difficulty',
name: 'Communauté',
formatter: (cell) => {
const difficultyConverter = new DifficultyConverter()
const displayedDifficultyResults = difficultyConverter.getNameAndAssociatedClassName(cell, null)
return html(`<span class='badge ${displayedDifficultyResults.originClassToAdd}--active'>${displayedDifficultyResults.originName}</span>`)
}
},
]