streamlit AgGrid删除行不会刷新后端的数据

Question

我在python streamlit应用程序中有两个AgGrid。连接了两个AgGrid，并且GridUpdateMode.MANUAL。我必须在第一个网格中选择行，然后单击更新，以便第二个网格将从第一个网格获得选定的行。第二个网格中的行应该被处理并保存。但是，我还必须从第二个网格中删除行。从第二个网格中删除行是通过onRowSelected实现的。

问题：

使用onRowSelected注入的javascript代码可以工作并从UI中删除行，但是，具有数据的python变量不会更新，或者从UI中移除的行不会从实际变量中移除。

请帮助我如何删除从UI和后端变量中选择的行

代码：

js = JsCode(
"""
function(e) {
let api = e.api;        
let sel = api.getSelectedRows();
const res = api.updateRowData({remove: sel});
api.refreshCells({force : true});
};
"""
)

col1, col2 = st.columns(2)
with st.container():
with col1:
smoke_gd = GridOptionsBuilder.from_dataframe(
df_alternatives[["article", "number"]]
)
smoke_gd.configure_default_column(
editable=False, resizable=True, sorteable=True
)
smoke_gd.configure_pagination(enabled=True)
smoke_gd.configure_side_bar()
smoke_gd.configure_selection(
selection_mode="multiple", use_checkbox=True
)
smoke_gd_gridoptions = smoke_gd.build()
smoke_grid_table = AgGrid(
df_alternatieven[["article", "number"]],
fit_columns_on_grid_load=True,
update_mode=GridUpdateMode.MANUAL,
gridOptions=smoke_gd_gridoptions,
enable_enterprise_modules=True,
allow_unsafe_jscode=True,
theme="fresh",
key="smoke_col1_gd",
)
selected_rows = smoke_grid_table["selected_rows"]
with col2:
smoke_col2_gd = GridOptionsBuilder.from_dataframe(
df_alternatives[["article", "number"]]
)
smoke_col2_gd.configure_default_column(
editable=False, resizable=True, sorteable=True
)
smoke_col2_gd.configure_pagination(enabled=True)
smoke_col2_gd.configure_grid_options(onRowSelected=js)
smoke_col2_gd.configure_side_bar()
smoke_col2_gd.configure_selection(
selection_mode="multiple", use_checkbox=True
)
smoke_col2_gd_gridoptions = smoke_col2_gd.build()
smoke_grid_table_filtered = AgGrid(
pd.DataFrame(selected_rows),
update_mode=GridUpdateMode.MANUAL,
gridOptions=smoke_col2_gd_gridoptions,
allow_unsafe_jscode=True,
reload_data=True,
key="smoke_col2_gd",
)

Answer 1

让JS直接在服务器端为您进行删除，然后在客户端自然地进行强制刷新，以适应最新的情况如何？

您的JS代码可以变成：

js = JsCode(
"""
function(e) {
let api = e.api;
let sel = api.getSelectedRows();
const tx = {remove: rowsToRemove,};
gridOptions.api.applyServerSideTransaction(tx);
api.refreshCells({force : true});
};
"""
)