Dash - 数据表中具有多个输入（输入和下拉）的回调

Question

我是 Dash 和 Python 的新手。我有一个带有下拉菜单和搜索输入的应用程序，但是我无法获得回调以使这两个输入都起作用。目前要么只有下拉菜单有效，要么只有输入有效。我想先 select 下拉菜单，然后能够在数据表中搜索文本。

下面是我的代码。

import pandas as pd
import dash
import dash_table
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
import pathlib
from dash.dependencies import Input, Output


df = pd.read_csv('data.csv',encoding='cp1252')
env_list = df["Environment"].unique()
PAGE_SIZE = 20
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP]
    
)

def description_card():
    """

    :return: A Div containing logo.
    """
    return html.Div(
        id="description-card",
        children=[
            html.Img(id="logo", src=app.get_asset_url("logo.png"), height=80)
        ],style={'textAlign': 'center'}
    )
def generate_control_card():
    """

    :return: Descriptions
    """
    return html.Div(
        id="env-card",
        children=[
            
            html.H3("Welcome to the Package Catalog"),
            
            
                     
        ]
    )


app.layout = html.Div(
    id="app-container",
    children=[
        # Banner
        html.Div(
            id="banner",
            className="banner",
            children=[description_card(),generate_control_card()
                     ],
        ),
     
        html.Div([
            html.P([
                    html.Label("Select Environment", style={"background": "#F5F5F5"}),
            dcc.Dropdown(
                id='env-select',
                options=[{'label': i, 'value': i} for i in env_list],
                value=env_list[0],
            )]),
         html.Div([    
            html.P([
                    html.Label("Search for a package and description in the search box.", style={'display':'inline-block', 'background': '#F5F5F5'}),
            dcc.Input(value='', id='filter-input', placeholder='Filter', debounce=True)
            ]),
             dash_table.DataTable(css=[{'selector': '.row', 'rule': 'margin: 0'}],
                id='datatable-paging',
                columns=[
                    {"name": i, "id": i} for i in df.columns  # sorted(df.columns)
                ],
                
                style_header={
                    'backgroundColor': 'F5F5F5',
                      'fontWeight': 'bold'
                },
                page_current=0,
                page_size=PAGE_SIZE,
                page_action='custom',

                sort_action='custom',
                sort_mode='single',
                sort_by=[]
                )
            ]),
        ]),
    ])



@app.callback(
    Output('datatable-paging', 'data'),
    [
     Input('datatable-paging', 'page_current'),
     Input('datatable-paging', 'page_size'),
     Input('datatable-paging', 'sort_by'),
     Input('env-select', 'value'),
     Input('filter-input', 'value')
    
    ])



def update_table(page_current, page_size, sort_by, environment_input, filter_string, 
                ):
    # Filter
    dff = df[df.Environment==environment_input]
    dff = df[df.apply(lambda row: row.str.contains(filter_string, regex=False).any(), axis=1)] 
        
    
    # Sort 
    if len(sort_by):
        dff = dff.sort_values(
            sort_by[0]['column_id'],
            ascending=sort_by[0]['direction'] == 'asc',
            inplace=False
        )

    return dff.iloc[
           page_current * page_size:(page_current + 1) * page_size
           ].to_dict('records')

Answer 1

更改此行

dff = df[df.apply(lambda row: row.str.contains(filter_string, regex=False).any(), axis=1)]

至此

dff = dff[df.apply(lambda row: row.str.contains(filter_string, regex=False).any(), axis=1)]

在上面显示的行之前的一行中，您应用下拉过滤器并将过滤结果存储为 dff。因此，通过使用 df 而不是 dff，您实际上是在丢弃下拉过滤器结果。

Dash - 数据表中具有多个输入（输入和下拉）的回调

Dash -Callback with multiple inputs (input and dropdown) in Datatable

python

pandas

plotly-dash

plotly-python