如何在回调中获取当前的dash ag-grid设置

问题是，我有一个组数据，可以在破折号选项卡上展开。我想在离开选项卡时保持行/列状态、顺序、过滤器相同。我使用 dcc.Store 保存回调中的设置，然后在选项卡返回时将它们取回。然而，行状态、顺序、展开/折叠状态似乎在破折号网格中没有属性。 具体来说，我想获取当前扩展节点并在刷新/切换选项卡时将其加载出来。 我相信这是解决方案，但如何在 python 中执行此操作 https://ag-grid.zendesk.com/hc/en-us/articles/360016031851-Saving-Restoring-expanded-group-node-state- in-the-local-storage

我的默认破折号网格选项：

dashGridOptions = {
    "rowSelection": "multiple",
    "suppressAggFuncInHeader": True,
    "animateRows": False, "sideBar": sideBar, 'groupDefaultExpanded': 1, "autoGroupColumnDef": {
        "headerName": "",
        "minWidth": 300,
    }

}

我的默认列def：

[{"field": x, "rowGroup": True, "hide": True, "pivot": True,
                                "suppressColumnsToolPanel": True} for x in underlying_risk_header] + [
                                  {"field": x, "sortable": True, "filter": True, "aggFunc": "sum",
                                   "cellStyle": {
                                       "function": "params.value > 0 ? {'color': 'green'} : {'color': 'red'}"
                                   }, "valueFormatter": {"function": "d3.format(',.0f')(params.value)"}} for
                                  x in
                                  underlying_risk_cols]

保存过滤模式的回调，我想保存订单状态，展开/折叠状态。

@callback(
    Output('iday-pv_table_setting', 'data', allow_duplicate=True),
    Input('iday-pivot-table-pv', 'columnDefs'),
    Input('iday-pivot-table-pv', 'columnState'),
    Input('iday-pivot-table-pv', 'filterModel'),
    Input('iday-pivot-table-pv', 'dashGridOptions'),
    Input('iday-pivot-table-pv', 'defaultColDef'), prevent_initial_call=True
)
def save_pv_table_state(columnDefs, columnState, filterModel, dashGridOptions, defaultColDef):
    state = {
        'columnDefs': columnDefs,
        'columnState': columnState,
        'filterModel': filterModel,
        'dashGridOptions': dashGridOptions,
        'defaultColDef': defaultColDef,
    }
    return json.dumps(state)

的确，Dash AG Grid 并没有直接提供属性来获取行/列的展开/折叠状态。你需要利用 AG Grid 的 API 和 Dash 回调机制来实现。以下是一种可行方案：

1. 使用 JavaScript 获取和设置展开状态

你需要使用 AG Grid 的 API 来获取和设置展开状态。

• 获取展开状态： 使用 gridApi.getExpandedNodes() 方法获取当前展开的节点列表。每个节点都包含一个 id 属性，可以用来唯一标识该节点。
• 设置展开状态： 使用 gridApi.ensureNodeVisible() 方法展开指定节点。

2. 通过 JavaScript 代码与 Dash 交互

• 从 Dash 传数据到 JavaScript： 可以使用 dash_clientside.no_update 装饰器创建客户端回调函数，并在回调函数中使用 dash_clientside.Client.props 获取 Dash 组件的属性值。
• 从 JavaScript 传数据到 Dash： 可以使用 window.dash_clientside.emit 方法触发 Dash 回调函数，并将数据作为参数传递。

3. 创建 Dash 回调函数

你需要创建两个 Dash 回调函数：

• 保存展开状态： 当用户切换选项卡时，触发该回调函数保存当前展开的节点 ID 列表到 dcc.Store 组件。
• 恢复展开状态： 当用户返回选项卡时，触发该回调函数从 dcc.Store 组件读取保存的节点 ID 列表，并使用 gridApi.ensureNodeVisible() 方法展开对应的节点。

代码示例:

import dash
import dash_ag_grid as dag
import dash_html_components as html
import dash_core_components as dcc
import json

app = dash.Dash(__name__)

# ... 其他代码 ...

# 创建 AG Grid 组件
dag.AgGrid(
    id="my-grid",
    # ... 其他配置 ...
)

# 创建 dcc.Store 组件用于存储展开状态
dcc.Store(id="grid-expanded-nodes")

# 保存展开状态的回调函数
@app.callback(
    Output("grid-expanded-nodes", "data"),
    Input("my-grid", "onGridReady"),
)
def save_expanded_nodes(grid_ready):
    if grid_ready:
        # 使用 JavaScript 获取展开的节点 ID 列表
        return dash.no_update
    return dash.no_update

# 恢复展开状态的回调函数
@app.callback(
    Output("my-grid", "dashGridOptions"),
    Input("grid-expanded-nodes", "data"),
    State("my-grid", "onGridReady"),
)
def restore_expanded_nodes(expanded_nodes_json, grid_ready):
    if grid_ready and expanded_nodes_json:
        expanded_nodes = json.loads(expanded_nodes_json)
        # 使用 JavaScript 展开对应的节点
        return dash.no_update
    return dash.no_update

# ... 其他代码 ...

JavaScript 代码 (在 assets 文件夹中创建):

// 获取展开的节点 ID 列表
window.dash_clientside.saveExpandedNodes = function(gridApi) {
  const expandedNodes = gridApi.getExpandedNodes();
  const expandedNodeIds = expandedNodes.map(node => node.id);
  window.dash_clientside.emit('save-expanded-nodes', expandedNodeIds);
}

// 展开指定的节点
window.dash_clientside.restoreExpandedNodes = function(gridApi, expandedNodeIds) {
  expandedNodeIds.forEach(nodeId => {
    gridApi.ensureNodeVisible(nodeId);
  });
}

注意:

• 你需要根据实际情况修改代码，例如组件 ID、数据结构等。
• 确保已正确配置 assets 文件夹和 JavaScript 文件路径。

希望以上方案能够帮助你解决问题！