javascript 数组对象中的href链接

6ovsh4lw 于 2023-10-14 发布在 Java

关注(0)|答案(2)|浏览(115)

我正在使用Grid.js库来构建WordPress网站中的表格。搜索了很多文档，但找不到 * 如何添加链接 * 到名称的第一列中，以在新的选项卡中打开，该选项卡是数组对象。

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", "[email protected]", "(353) 01 222 3333"],
    ["Mark", "[email protected]", "(01) 22 888 4444"],
    ["Eoin", "[email protected]", "0097 22 654 00033"],
    ["Sarah", "[email protected]", "+322 876 1233"],
    ["Afshin", "[email protected]", "(353) 22 87 8356"]
  ]
}).render(document.getElementById("wrapper"));

输出

View Code in Sandbox

JavaScript

来源：https://stackoverflow.com/questions/71501156/href-links-in-the-array-object

2条答案

按热度按时间

gajydyqb1#

您可以使用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", "[email protected]", "(353) 01 222 3333"],
    [2, "Mark", "[email protected]", "(01) 22 888 4444"],
    [3, "Eoin", "[email protected]", "0097 22 654 00033"],
    [4, "Sarah", "[email protected]", "+322 876 1233"],
    [5, "Afshin", "[email protected]", "(353) 22 87 8356"]
  ]
}).render(document.getElementById("wrapper"));