Streamlit中如何结合Session State与AgGrid实现页面切换后保留勾选选择？

修改后的完整主页面代码（如app.py） #

import pandas as pd
import streamlit as st
from st_aggrid import GridOptionsBuilder, AgGrid, GridUpdateMode, ColumnsAutoSizeMode

# 初始化Session State存储选中行的索引
if 'selected_row_index' not in st.session_state:
    st.session_state.selected_row_index = None

data = {
    "calories": [420, 380, 390],
    "duration": [50, 40, 45],
    "random1": [5, 12, 1],
    "random2": [230, 23, 1]
}
df = pd.DataFrame(data)

# 构建GridOptions，指定行唯一ID为索引，确保选中状态精准匹配
gb = GridOptionsBuilder.from_dataframe(df[["calories", "duration"]])
gb.configure_selection(selection_mode="single", use_checkbox=True)
# 设置行ID为DataFrame索引，避免行数据重复时匹配错误
gb.configure_grid_options(getRowNodeId="params.data.index")
gb.configure_side_bar()
gridOptions = gb.build()

# 从Session State读取历史选中状态，设置预选中行
if st.session_state.selected_row_index is not None:
    gridOptions['preSelectedRows'] = [df.iloc[st.session_state.selected_row_index].to_dict()]

# 渲染AgGrid并同步选择状态到Session State
data = AgGrid(
    df.reset_index(),  # 将索引加入数据，让AgGrid能获取到index字段
    gridOptions=gridOptions,
    enable_enterprise_modules=True,
    allow_unsafe_jscode=True,
    update_mode=GridUpdateMode.SELECTION_CHANGED,
    columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS
)

selected_rows = data["selected_rows"]
# 更新Session State中的选中索引
if len(selected_rows) > 0:
    st.session_state.selected_row_index = selected_rows[0]['index']
    st.write("选中行：", selected_rows[0])
else:
    # 取消选择时重置Session State
    st.session_state.selected_row_index = None

核心逻辑说明 #

• Session State持久化：通过st.session_state创建全局变量存储选中行索引，跨页面切换时数据不会被销毁。
• 行唯一标识配置：用getRowNodeId指定行ID为DataFrame索引，确保AgGrid能精准识别历史选中行，避免因数据重复导致状态错乱。
• 预选中状态恢复：页面加载时，从Session State读取历史索引，通过preSelectedRows参数恢复之前的勾选状态。
• 实时状态同步：监听AgGrid的选择变化，实时更新Session State中的索引值，确保状态始终同步。

注意事项 #

• 必须将DataFrame索引加入渲染数据（df.reset_index()），否则AgGrid无法获取索引字段用于行ID匹配。
• pages文件夹中的其他页面无需额外配置，Session State在整个Streamlit应用中全局共享。

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