Plotly Dash DataTable 中的可点击超链接

Question

有几个类似的问题，我将在本文中引用，但我有一个 Dash DataTable，其中有一列我想创建一个可点击的超链接。 table 本质上是这样的：

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 的数据和列引用创建 table，如下所示：

# 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}')

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

现在，根据 Plotly 论坛的 this question，我进行了编辑以适合我的：

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

使用，我做了以下也抛出了 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' }
            ]]

我在这里做错了什么？我觉得为这些创建链接应该不会太复杂。另外，如果你能在某些行中容纳多个链接，你将是我永远的英雄。

Answer 1

如果您确定 Markdown format the solution suggested in the Plotly Dash community forum 中的链接应该有效：

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)

Plotly Dash DataTable 中的可点击超链接

Clickable Hyperlinks in Plotly Dash DataTable

python

plotly-dash