Dash表格多行选择：如何初始化全选及实现全选/取消全选？

问题描述 #

使用如下Dash表格代码时：

dash_table.DataTable(
            id='datasource-interactivity',
            columns= [
                #{"name": i, "id": i} for i in data_all.columns 
                {"name": i, "id": i, "selectable": True} for i in data_all.columns
                ],
            data=data_all.to_dict('records'), 
            filter_action="native",
            sort_action="native",
            sort_mode="multi",
            column_selectable="single",
            row_selectable="multi",   #<-----
            selected_columns=[],
            selected_rows=[],   #<------THIS
            page_action="native",
            page_current= 0,
            page_size= 100,
            )

需实现两个需求：

1. 初始化时将所有行设置为选中状态
2. 实现全选和取消全选的操作

解决方案 #

1. 初始化选中所有行 #

直接修改selected_rows的初始值为包含所有行索引的列表即可，利用数据源的长度生成索引范围：

selected_rows=list(range(len(data_all))),  # 替换原空列表

调整后的完整表格代码：

dash_table.DataTable(
            id='datasource-interactivity',
            columns= [
                {"name": i, "id": i, "selectable": True} for i in data_all.columns
                ],
            data=data_all.to_dict('records'), 
            filter_action="native",
            sort_action="native",
            sort_mode="multi",
            column_selectable="single",
            row_selectable="multi",
            selected_columns=[],
            selected_rows=list(range(len(data_all))),  # 初始化选中所有行
            page_action="native",
            page_current= 0,
            page_size= 100,
            )

2. 实现全选/取消全选操作 #

需要添加按钮组件并配合回调函数完成逻辑：

第一步：添加触发按钮

在页面布局中加入一个按钮：

html.Button('全选/取消全选', id='select-all-btn', n_clicks=0)

第二步：编写回调逻辑

监听按钮点击事件，根据当前选中状态切换全选/取消全选：

@app.callback(
    Output('datasource-interactivity', 'selected_rows'),
    Input('select-all-btn', 'n_clicks'),
    State('datasource-interactivity', 'selected_rows'),
    State('datasource-interactivity', 'data'),
    prevent_initial_call=False
)
def toggle_select_all(n_clicks, selected_rows, table_data):
    total_rows = len(table_data)
    # 对比当前选中行数与总行数，判断切换方向
    if len(selected_rows) == total_rows:
        return []  # 已全选则取消
    else:
        return list(range(total_rows))  # 未全选则选中所有行

内容的提问来源于stack exchange，提问作者KansaiRobot