Как сделать всплывающее окно при нажатии на строку данных? - PullRequest
Новая
       5

Как сделать всплывающее окно при нажатии на строку данных?

0 голосов
/ 04 апреля 2020

У меня есть дата, и я хотел бы создать всплывающее окно, например da sh bootstrap Модальный при нажатии на него:

Поэтому я попытался обновить датируется при нажатии на ячейку, вызывая пустой модал: 

import dash_table
import os
import pandas as pd
from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_bootstrap_components as dbc

from ..server import app

PROJECT_ROOT = os.path.abspath(os.path.dirname(__file__))
DATA_PATH = os.path.join(PROJECT_ROOT, '../data/')
df = pd.read_csv(DATA_PATH + 'tickers_september_2017_red.csv')


def layout():
    return html.Div([
        dash_table.DataTable(
            id='table',
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict('records'),
        ),
        dbc.Modal(
            [
                dbc.ModalHeader("Header"),
                dbc.ModalBody("This is the content of the modal"),
                dbc.ModalFooter(
                    dbc.Button("Close", id="close", className="ml-auto")
                ),
            ],
            id="modal",
        )
    ])


@app.callback(Output('modal', 'is_open'),
              [Input('table', 'active_cell'),
               Input('close', 'n_clicks')],
              [State("modal", "is_open")])
def toggle_modal(n1, n2, is_open):
    print("n1: ", n1, " n2: ", n2)
    if n1 or n2:
        return not is_open
    return is_open

Но он дает мне только модал под доской. Не похоже на всплывающее окно, как в документации.

Поэтому я попытался 

import dash_table
import os
import pandas as pd
from dash.dependencies import Input, Output, State
import dash_html_components as html
import dash_bootstrap_components as dbc

from ..server import app

PROJECT_ROOT = os.path.abspath(os.path.dirname(__file__))
DATA_PATH = os.path.join(PROJECT_ROOT, '../data/')
df = pd.read_csv(DATA_PATH + 'tickers_september_2017_red.csv')


def layout():
    return html.Div([
        dash_table.DataTable(
            id='table',
            columns=[{"name": i, "id": i} for i in df.columns],
            data=df.to_dict('records'),
        ),
        dbc.Modal(
            [
                dbc.ModalHeader("Header"),
                dbc.ModalBody("This is the content of the modal"),
                dbc.ModalFooter(
                    dbc.Button("Close", id="close", className="ml-auto")
                ),
            ],
            id="modal",
        )
    ])


@app.callback(Output('modal', 'children'),
              [Input('table', 'active_cell'),
               Input('close', 'n_clicks')],
              # [State('modal', 'is_open')]
              )
def update_graph(active_cell, n_clicks):
    print("active_cell: ", active_cell)
    if active_cell is not None:
        row = df.iloc[[active_cell.get("row")]]
        return dbc.Modal(
            [
                dbc.ModalHeader(row['Name'].values[0]),
                dbc.ModalBody("This will be something more interesting"),
                dbc.ModalFooter(
                    dbc.Button("Close", id="close", className="ml-auto")
                ),
            ],
            id="modal",
        )

Но active_cell остается как «Нет», даже если щелкнуть, или в другой строке, или двойной щелчок

...