如何在dash-ag-grid中实现可编辑列垂直堆叠且不使用行合并？

核心思路 #

通过自定义CSS修改指定列单元格的display属性为block，配合dash-ag-grid的cellClassRules实现响应式触发（仅小屏幕生效），无需复制数据行或使用行合并，完美适配编辑功能。

步骤1：编写自定义CSS #

在Dash应用中嵌入以下CSS，定义垂直堆叠的单元格样式：

/* 垂直堆叠单元格的样式 */
.vertical-stack-cell {
    display: block !important;
    width: 100% !important;
    border-bottom: 1px solid #eee;
    padding: 8px 0;
}

/* 小屏幕媒体查询，仅在宽度小于768px时生效 */
@media (max-width: 768px) {
    /* 可选：隐藏堆叠列的表头，避免重复展示 */
    .ag-header-cell-label[col-id="attr1"],
    .ag-header-cell-label[col-id="attr2"] {
        display: none;
    }
}

步骤2：配置dash-ag-grid的列属性 #

在列定义中，为需要垂直堆叠的可编辑列添加cellClassRules，指定小屏幕时应用自定义CSS类：

import dash_ag_grid as dag
from dash import Dash, html

app = Dash(__name__)

column_defs = [
    # 非堆叠列（保持正常布局）
    {
        "headerName": "ID",
        "field": "id",
        "editable": False,
        "width": 80
    },
    {
        "headerName": "名称",
        "field": "name",
        "editable": True,
        "width": 150
    },
    # 需要垂直堆叠的可编辑列
    {
        "headerName": "属性1",
        "field": "attr1",
        "editable": True,
        "cellClassRules": {
            "vertical-stack-cell": "window.innerWidth < 768"
        }
    },
    {
        "headerName": "属性2",
        "field": "attr2",
        "editable": True,
        "cellClassRules": {
            "vertical-stack-cell": "window.innerWidth < 768"
        }
    }
]

row_data = [
    {"id": 1, "name": "项目A", "attr1": "值1", "attr2": "值2"},
    {"id": 2, "name": "项目B", "attr1": "值3", "attr2": "值4"}
]

app.layout = html.Div([
    dag.AgGrid(
        id="stacked-column-grid",
        columnDefs=column_defs,
        rowData=row_data,
        defaultColDef={"resizable": True},
        className="ag-theme-alpine"
    )
])

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

关键细节说明 #

• 响应式触发：通过cellClassRules中的window.innerWidth < 768判断屏幕尺寸，仅在小屏幕时启用垂直堆叠，大屏保持常规表格布局。
• 编辑功能兼容：dash-ag-grid的编辑器会自动适配block布局的单元格，编辑后的值直接绑定到原始数据行，不会出现数据库映射混乱的问题。
• 样式自定义：可根据需求调整CSS中的border、padding等属性，优化垂直堆叠后的视觉效果；若不需要隐藏表头，可删除媒体查询中的表头隐藏规则。

备选优化方案（解决窗口尺寸判断延迟） #

如果cellClassRules的窗口尺寸判断存在响应延迟，可改用Dash回调监听窗口大小变化，动态更新列的样式类：

from dash import Input, Output, State
import dash_core_components as dcc

app.layout = html.Div([
    dcc.Store(id="window-size", data={"width": 0, "height": 0}),
    dag.AgGrid(
        id="stacked-column-grid",
        columnDefs=column_defs,
        rowData=row_data,
        defaultColDef={"resizable": True},
        className="ag-theme-alpine"
    )
])

# 监听窗口大小变化
app.clientside_callback(
    """
    function() {
        return {width: window.innerWidth, height: window.innerHeight};
    }
    """,
    Output("window-size", "data"),
    Input("stacked-column-grid", "id"),
    prevent_initial_call=False
)

# 动态更新列的样式类
@app.callback(
    Output("stacked-column-grid", "columnDefs"),
    Input("window-size", "data"),
    State("stacked-column-grid", "columnDefs")
)
def update_column_classes(window_size, current_cols):
    is_small_screen = window_size["width"] < 768
    for col in current_cols:
        if col["field"] in ["attr1", "attr2"]:
            col["cellClass"] = "vertical-stack-cell" if is_small_screen else ""
    return current_cols

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