数组对象中的 href 链接

Question

我正在使用 Grid.js 库在 wordpress 网站中构建表格。搜索了很多文档，但无法找到 how to add links to the names in the first column to open in a new tab 这是数组对象。

HTML

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
      rel="stylesheet"
    />
    <title>Grid.js Hello World</title>
  </head>
  <body>
    <h1>
      Grid.js Hello World
    </h1>

    <div id="wrapper"></div>

    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
    <script src="src/index.js"></script>
  </body>
</html>

JS文件：

new gridjs.Grid({
  columns: ["Name", "Email", "Phone Number"],
  search: true,
  data: [
    ["John", "john@example.com", "(353) 01 222 3333"],
    ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
    ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
    ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
  ]
}).render(document.getElementById("wrapper"));

输出

View Code in Sandbox

Answer 1

您可以使用 gridjs 提供的自定义单元格格式化程序。

参考文档：https://gridjs.io/docs/examples/html-cells/

我的工作代码沙箱 link：https://codesandbox.io/s/gridjs-hello-world-forked-uvsgom

Answer 2

您可以使用 formatter 选项和 gridjs.html() 函数添加自定义 HTML。例如：

new gridjs.Grid({
  // Converted the columns to objects, instead of strings, to pass options
  columns: [
    { name: "id", hidden: true },
    {
      name: "Name",
      // Added a `formatter` function
      formatter: (cell, row) => {
        // Uses the `html` function to add elements
        // Note that we're pulling a value for the link from the
        // data set as well for a more complete, real-world example
        return gridjs.html(
          `<a href='mypage.html?id=${row.cells[0].data}'>${cell}</a>`
        );
      }
    },
    {
      name: "Email",
      formatter: (cell, row) => {
        return gridjs.html(`<a href='mailto:${row.cells[2].data}'>${cell}</a>`);
      }
    },
    { name: "Phone Number" }
  ],
  search: true,
  // Added unique id, per OP's comments
  data: [
    [1, "John", "john@example.com", "(353) 01 222 3333"],
    [2, "Mark", "mark@gmail.com", "(01) 22 888 4444"],
    [3, "Eoin", "eoin@gmail.com", "0097 22 654 00033"],
    [4, "Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
    [5, "Afshin", "afshin@mail.com", "(353) 22 87 8356"]
  ]
}).render(document.getElementById("wrapper"));

根据 OP 的评论使用唯一 ID 更新示例

工作代码沙箱：https://codesandbox.io/s/gridjs-hello-world-forked-u52kyg?file=/src/index.js

来源：https://gridjs.io/docs/examples/html-cells

数组对象中的 href 链接

href links in the array object

javascript

arrays

jquery

grid.js