Plotly Dash DataTable中的可点击超链接

4

这里有一些类似的问题,我会在此引用,但是我有一个Dash DataTable,其中有一列我希望变成可点击的超链接。表格大致如下:

Date                        Ticket ID           Work Order           Link (s)
2018-08-30 22:52:25         1444008             119846184            google.com/woNum=119846184
2021-09-29 13:33:49         1724734             122445397, 122441551 google.com/woNum=122445397, google.com/woNum=122441551

如果没有超链接,我将通过Pandas数据帧以及Dash DataTable 的数据和列引用来创建表格:

# works fine
searchFrame = searchFrame.drop(columns=['ContentNoStop'])
columns = [{'name': col, 'id': col} for col in searchFrame.columns]

链接是通过以下方式创建的:
woLink = r'http://corp.com/uniqueid='

df['WO Link'] = df['Work Order'].str.replace('(\d+)', rf'{woLink}\1')

crLink = r'http://corp.com/uniqueid='
        
df['Ticket Link'] = crLink + df['Ticket ID'].astype(str)

现在,根据Plotly论坛上这个问题的跟进,我进行了修改以适应我的需求:

columns = [
        {'name': col, 'id': col} 
for col in searchFrame.loc[
                :,
                [
                'Reported Date', 'Site','Ticket ID', 'Ticket Link', 'Work Order',\
                'Score', 'Level', 'First', 'Last', 'Department',  \
                'Detection', 'Code', 'Content', 'Description', 'Owner', 'Owner Group', 'Document ID'
                ], { "name": "WO Link", "id": "WO Link", 'type': 'text', "presentation" :'markdown' }
            ],
        ]

直接复制代码会导致Syntax Error: Invalid Syntax错误。所以,我进行了编辑:

columns = [
        {'name': col, 'id': col} 
for col in searchFrame.loc[
                :,
                [
                'Reported Date', 'Site','Ticket ID', 'Ticket Link', 'Work Order',\
                'Score', 'Level', 'First', 'Last', 'Department',  \
                'Detection', 'Code', 'Content', 'Description', 'Owner', 'Owner Group', 'Document ID'
                ], { "name": "WO Link", "id": "WO Link", 'type': 'text', "presentation" :'markdown' }
            ]]

然而,这会引发一个 raise IndexingError("Too many indexers") pandas.core.indexing.IndexingError: Too many indexers 的错误。

按照这个Stack Overflow问题的回答,在下面的操作也会导致 Too many indexers 的错误。我也尝试了该问题的另一个回答(如下所示),但是会导致 TypeError: unhashable type: 'slice' 的错误。

idx = pd.IndexSlice
columns = [
                {'name': col, 'id': col} 
for col in searchFrame.loc[idx[
                :,
                [
                'Reported Date', 'Site','Ticket ID', 'Ticket Link', 'Work Order',\
                'Score', 'Level', 'First', 'Last', 'Department',  \
                'Detection', 'Code', 'Content', 'Description', 'Owner', 'Owner Group', 'Document ID'
                ], { "name": "WO Link", "id": "WO Link", 'type': 'text', "presentation" :'markdown' }
            ], :]
        ]

columns = [
        {'name': col, 'id': col} 
for col in searchFrame.loc(axis=0)[
                :,
                [
                'Reported Date', 'Site','Ticket ID', 'Ticket Link', 'Work Order',\
                'Score', 'Level', 'First', 'Last', 'Department',  \
                'Detection', 'Code', 'Content', 'Description', 'Owner', 'Owner Group', 'Document ID'
                ], { "name": "WO Link", "id": "WO Link", 'type': 'text', "presentation" :'markdown' }
            ]]

我在这里做错了什么?我觉得为这些创建链接不应该太复杂。此外,如果您可以在某些行中容纳多个链接,那么您将永远是我的英雄。

1个回答

5

如果您确保链接是以Markdown格式编写的,则在Plotly Dash社区论坛中提出的解决方案应该有效:

import dash
import dash_html_components as html
import dash_table
import pandas as pd

df = pd.DataFrame({
    'Date': ['2018-08-30 22:52:25', '2021-09-29 13:33:49'],
    'Ticket ID': [1444008, 1724734],
    'Work Order': ['119846184', '122445397'],
    'Link(s)': ['[Google](https://www.google.com)', '[Twitter](https://www.twitter.com), [Facebook](https://www.facebook.com)'],
})

app = dash.Dash()

app.layout = html.Div(children=[

    dash_table.DataTable(
        data=df.to_dict(orient='records'),
        columns=[{'id': x, 'name': x, 'presentation': 'markdown'} if x == 'Link(s)' else {'id': x, 'name': x} for x in df.columns],
        style_table={'position': 'relative', 'top': '5vh', 'left': '5vw', 'width': '60vw'}
    ),

])

if __name__ == '__main__':
    app.run_server(host='127.0.0.1', debug=True)

1
这允许复制链接,但不会弹出超链接。我错过了什么吗?如果有帮助的话,我放了一个编辑来展示链接是如何创建的。 - Sam Dean
https://dev59.com/Kqj1oIgBc1ULPQZF7q7B - DataYoda

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接