Ссылки href в объекте массива
Я использую библиотеку 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"));
Выход
@evolutionxbox спасибо за исправление
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете использовать пользовательский форматировщик ячеек, предоставленный gridjs.
Обратитесь к документам: https://gridjs.io/docs/examples/html-cells/
Ссылка на песочницу моего рабочего кода: https://codesandbox.io/s/gridjs-hello-world-forked-uvsgom
спасибо, здесь все имена имеют один и тот же URL-адрес, возможно ли иметь уникальный URL-адрес для каждого поля?
Вы можете добавить собственный HTML, используя опцию formatter и функцию gridjs.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"));
Обновленный пример с использованием уникального идентификатора в соответствии с комментариями OP.
Рабочий кодSandbox: https://codesandbox.io/s/gridjs-hello-world-forked-u52kyg?file=/src/index.js
Источник: https://gridjs.io/docs/examples/html-ячейки
спасибо, здесь все имена имеют один и тот же URL-адрес, возможно ли иметь уникальный URL-адрес для каждого поля?
Да. Вы можете добавить уникальный идентификатор к объектам data, а затем ссылаться на него, как я сделал выше. Дайте мне минуту, и я обновлю свой пример.
@DineshSunny Я обновил пример, используя тот же URL-адрес, добавив уникальный идентификатор из набора данных. Обратите внимание, что я добавил 1, 2, 3, etc в качестве 0-го элемента в каждом массиве, который будет использоваться в качестве уникального идентификатора.
Добро пожаловать @DineshSunny! Рад помочь!
В настоящее время у меня есть таблица HTML с 200 строками, я хотел бы преобразовать html в таблицу js сетки, чтобы получить производительность со скоростью страницы, это нормально, если я это сделаю?
@DineshSunny Вы получите небольшой удар по производительности, потому что JS должен отображать DOM, а не статический HTML, но, на мой взгляд, это должно быть незначительным и нормально работать с таким небольшим количеством строк. Если бы я делал эту страницу, я бы сделал именно то, что вы делаете с JS.
Извините, не получил этот. Это нормально, если я потрачу время на преобразование всех 200 статических строк html в сетку js-таблицы, чтобы иметь производительность в скорости?
Я может не правильно понимаю вопрос. Если у вас уже есть эта таблица в виде HTML-страницы, преобразование ее в JavaScript не даст вам большого прироста производительности, если таковой вообще будет. Как и JS, это может быть (возможно) файл меньшего размера для загрузки пользователем, но время, необходимое GridJS для загрузки/рендеринга сетки, скорее всего, займет больше времени, чем браузеру потребуется просто загрузить простой файл HTML. . Что вы получаете, конвертируя это в JS, так это более простое обслуживание/модификации в будущем, а также встроенные функции самой сетки (сортировка, разбиение по страницам и т. д.).
Обратите внимание, что данные представляют собой обычный массив JS, а не JSON.