[英]Angular generic-ui set custom href link in cell
I am using https://generic-ui.com/ grid in angular version.我在 angular 版本中使用https://generic-ui.com/网格。
It is working fine.它工作正常。 I have already displayed grid and all data in that.我已经在其中显示了网格和所有数据。
Now in one cell I want to set a href link.现在我想在一个单元格中设置一个 href 链接。 but in that cell text should be different and a href link should be different.但在那个单元格中,文本应该不同,href 链接也应该不同。
I have followed their example but they have given example like text and link both are same so in grid in cell it is displaying that.我遵循了他们的示例,但他们给出了文本和链接之类的示例,它们都是相同的,因此在单元格中的网格中显示了它。 See below for more details.请参阅下面的更多细节。
In below image you can see LINK column has href link set.在下图中,您可以看到 LINK 列设置了 href 链接。 for that code is below.该代码如下。
{
header: 'GuiCellView.LINK',
field: 'wiki',
type: GuiDataType.STRING,
view: GuiCellView.LINK
},
And the field wiki has this value in.ts file并且 wiki 字段在 .ts 文件中有这个值
const food = [{
name: 'Avocado',
wiki: 'https://en.wikipedia.org/wiki/Avocado',
image: '//upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Persea_americana_fruit_2.JPG/220px-Persea_americana_fruit_2.JPG'
}];
But what I want to achieve like in wiki it should be click here and when user click there then it should open one link, but I did not found any way to set some custom link.但是我想在 wiki 中实现的应该是单击此处,当用户单击那里时它应该打开一个链接,但我没有找到任何方法来设置一些自定义链接。
I mean like in wiki: 'Click here' -- So in cell it will display click here but I want to set href link over there.我的意思是像在 wiki 中:“单击此处”——因此在单元格中它将显示单击此处,但我想在那里设置 href 链接。
You can see demo here: https://generic-ui.com/guide/columns你可以在这里看到演示: https://generic-ui.com/guide/columns
You can use custom HTML to achieve that.您可以使用自定义 HTML 来实现。
https://stackblitz.com/edit/angular-grid-quick-start-mi6byv?file=src/string-food/string-food.component.ts https://stackblitz.com/edit/angular-grid-quick-start-mi6byv?file=src/string-food/string-food.component.ts
https://github.com/generic-ui/generic-ui/issues/11 https://github.com/generic-ui/generic-ui/issues/11
......
{
header: 'GuiCellView.LINK',
field: 'wiki',
type: GuiDataType.STRING,
view: (value: string, obj: any) => {
return `<a href="${value}" target="_blank">${obj.name}</a>`;
},
},
......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.