0
148
Vistasenlaces href en el objeto de matriz
Estoy usando la biblioteca Grid.js para construir las tablas en el sitio web de wordpress. Busqué mucha documentación pero no pude encontrar cómo agregar enlaces a los nombres en la primera columna para abrir en una nueva pestaña que es el objeto de matriz.
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>archivo 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"));Producción
2 Respuestas
Responde la pregunta0
Puede agregar HTML personalizado usando la opción de formatter y la función gridjs.html() . Por ejemplo:
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"));Ejemplo actualizado con identificación única, según los comentarios de OP
Código de trabajo Sandbox: https://codesandbox.io/s/gridjs-hello-world-forked-u52kyg?file=/src/index.js
0
Puede usar un formateador de celdas personalizado proporcionado por gridjs.
Consulte documentos: https://gridjs.io/docs/examples/html-cells/
Mi enlace de espacio aislado de código de trabajo: https://codesandbox.io/s/gridjs-hello-world-forked-uvsgom