时间戳

首页 > 解决方案 > 破折号：每列创建一个下拉列表，而不是每个表的下拉列表

python - 破折号：每列创建一个下拉列表，而不是每个表的下拉列表

问题描述

我有一个如下所示的数据集：

cat_id  author  year    publisher   country value (dollars)
name1   kunga   1998    D and D Australia   10
name2   siba    2001    D and D UK  20
name3   siba    2001    D and D US  20
name3   shevara 2001    D and D UK  10
name3   dougherty   1992    D and D Australia   20
name4   ken 2011    S and K Australia   10

目的是产生一个多选下拉菜单每列，而不是所有列（因为我目前所做的每列过滤器不够，我需要能够一次过滤每列的多个项目）。

使用上面的示例，这将在 cat_id 下添加一个名称为 1、2、3、4 的单元格；作者将有一个带有 kunga、siba、shevara 和 donerty 的下拉列表；year 将与 1992,1998,2001,2011 等一起下降。

我写了下面的代码：

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

app = dash.Dash(__name__)
df = pd.read_excel('dash_test_doc.xlsx')


app.layout = html.Div([
    html.Div([
        dcc.Input(
            id='adding-rows-name',
            placeholder='Enter a column name...',
            value='',
            style={'padding': 10},),html.Button('Add Column', id='adding-rows-button', n_clicks=0)], style={'height': 50}),

#Need to move this to being within each column?
        html.Label('Multi-Select Dropdown'),
            dcc.Dropdown(options=[{'label':i,'value':i} for i in df.columns],
            value = [i for i in df.columns],
            multi=True),


        dash_table.DataTable(
         id='adding-rows-table',
         columns=[{"name": i, "id": i,"deletable":True} for i in df.columns],
#        column_conditional_dropdowns=[{'id':i,'dropdowns':df[i]} for i in df.columns],
         data = df.to_dict('rows'),
         editable=True,
         filtering=True,
         sorting=True,
         sorting_type="multi",
         row_selectable="multi",
         row_deletable=True,
         selected_rows=[],
         pagination_mode="fe",
         style_cell_conditional=[
         {
             'if': {'row_index': 'odd'},
             'backgroundColor': 'rgb(230, 255, 230)'
         }
     ] + [
         {
             'if': {'column_id': c},
             'textAlign': 'left'
        } for c in ['Date', 'Region']
    ],
    style_header={
        'backgroundColor': 'white',
        'fontWeight': 'bold'
    }
    ),



    html.Button('Add Row', id='editing-rows-button', n_clicks=0),
    dcc.Graph(id='adding-rows-graph')
])


@app.callback(
    Output('adding-rows-table', 'data'),
    [Input('editing-rows-button', 'n_clicks')],
    [State('adding-rows-table', 'data'),
     State('adding-rows-table', 'columns')])
def add_row(n_clicks, rows, columns):
    if n_clicks > 0:
        rows.append({c['id']: '' for c in columns})
    return rows


@app.callback(
    Output('adding-rows-table', 'columns'),
    [Input('adding-rows-button', 'n_clicks')],
    [State('adding-rows-name', 'value'),
     State('adding-rows-table', 'columns')])
def update_columns(n_clicks, value, existing_columns):
    if n_clicks > 0:
        existing_columns.append({
            'id': value, 'name': value,
            'editable_name': True, 'deletable': True
        })
    return existing_columns


@app.callback(
    Output('adding-rows-graph', 'figure'),
    [Input('adding-rows-table', 'data'),
     Input('adding-rows-table', 'columns')])
def display_output(rows, columns):
    return {
        'data': [{
            'type': 'heatmap',
            'z': [[row.get(c['id'], None) for c in columns] for row in rows],
            'x': [c['name'] for c in columns]
        }]
    }



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

这种方法有两个具体问题：

  1. 下拉菜单是在表级别完成的，而不是每列级别。
  2. 然后我想过滤表格以仅显示下拉栏中的内容，目前尚未完成。

我知道有问题的代码部分是：

#Need to move this to being within each column?
        html.Label('Multi-Select Dropdown'),
            dcc.Dropdown(options=[{'label':i,'value':i} for i in df.columns],
            value = [i for i in df.columns],
            multi=True),

并且没有回调，但我是 dash 的新手，我正在努力理解我应该做什么。如果有人能告诉我如何在这段代码中解决这两个问题，我将不胜感激。

作为旁注/免责声明，我最初在此处提出了这个问题作为更大问题的一部分，但我意识到我需要使我的问题更具体，更具体，所以我要单独解决每个问题。

标签： pythonplotly-dashplotly-python

解决方案

谢谢，Kela，让这个问题更具体一点。这仍然是一个很好的大小，所以我会看看我是否可以帮助解决所有问题。

首先，您需要将表中的列定义更改为'presentation': 'dropdown'字典中要显示为下拉列表的每一列。当前下拉菜单在表格内不起作用，因为您使用了该dcc.Dropdown组件，该组件是与表格分开的组件。如果您希望它们在表格内工作，则需要使用column_static_dropdownor column_conditional_dropdowns（我看到您已将其注释掉）。

不过，我不确定表内的下拉菜单是否可以用作回调的一部分。我尝试连接一个，但下拉列表的 ID 未被识别为布局的一部分。要执行您想要的操作 - 我认为 - 需要设置多个下拉列表，使用dcc.Dropdown这些值并将这些值作为更新表data道具的回调的输入。

这是一个我已经确认有效的小例子，但有一些限制：

app = dash.Dash(__name__)
df = pd.DataFrame(np.arange(30).reshape(5, 6))

app.layout = html.Div([
    html.Div([
        dcc.Input(
            id='adding-rows-name',
            placeholder='Enter a column name...',
            value='',
            style={'padding': 10}, ),
        html.Button('Add Column', id='adding-rows-button', n_clicks=0)], style={'height': 50}),

    # Need to move this to being within each column?
    html.Label('Multi-Select Dropdown'),
    dcc.Dropdown(
        id='test-dropdown',
        options=[{'label': i, 'value': i} for i in df[0]],
        value=[i for i in df[0]],
        multi=True),

    dash_table.DataTable(
        id='adding-rows-table',
        columns=[{"name": i, "id": i, "deletable": True} for i in df.columns],
        data=df.to_dict('rows'),
        editable=True,
        filtering=True,
        sorting=True,
        sorting_type="multi",
        row_selectable="multi",
        row_deletable=True,
        selected_rows=[],
        pagination_mode="fe",
        style_cell_conditional=[
               {
                   'if': {'row_index': 'odd'},
                   'backgroundColor': 'rgb(230, 255, 230)'
               }
           ] + [
               {
                   'if': {'column_id': c},
                   'textAlign': 'left'
               } for c in ['Date', 'Region']
           ],
        style_header={
            'backgroundColor': 'white',
            'fontWeight': 'bold'
        }
    ),

    html.Button('Add Row', id='editing-rows-button', n_clicks=0),
    dcc.Graph(id='adding-rows-graph'),
])


@app.callback(
    Output('adding-rows-table', 'data'),
    [Input('editing-rows-button', 'n_clicks'),
     Input('test-dropdown', 'value')],
    [State('adding-rows-table', 'data'),
     State('adding-rows-table', 'columns')])
def add_row(n_clicks, dropdown_value, rows, columns):
    if n_clicks > 0:
        rows.append({c['id']: '' for c in columns})

    df = pd.DataFrame.from_dict(rows)

    try:
        df_filtered = df[df['0'].isin(dropdown_value)]
    except TypeError:
        df_filtered = df[df['0'].eq(dropdown_value)]

    return df_filtered.to_dict(orient='records')

现在只有一个下拉菜单，它适用于第一列中的值。你需要添加更多，它会很快变得复杂。您可能可以设置下拉菜单的样式，以便它们更清楚地与相关列相关联。

还有一个问题是，一旦您将行过滤掉后如何处理它们。回调从表中拉入，State data但是，如果一行被过滤掉，则它不在状态中，并且不能通过再次在下拉列表中进行选择来重新添加。您将需要一种不同的方式来处理存储表的数据，以便不会以这种方式删除行。

推荐阅读