在 Grid.js 中使用 HTML 填充单元格答案

【问题标题】：Populate cells with HTML in Grid.js在 Grid.js 中使用 HTML 填充单元格
【发布时间】：2020-06-07 11:52:29
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

<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>

【讨论】：

【解决方案3】：

先导入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

【讨论】：

不使用 javascript 框架时如何做到这一点？
@JakeMcAllister 我的回答不是特定于框架的。您仍然可以在没有任何 JS 框架的情况下使用该答案。
@AfshinMehrabani 如何直接通过 HTML 标记通过 vanilla JS 使用它？如何让“html”功能工作？仅供参考，我正在使用 CDN 加载 gridjs