Streamlit-AgGrid多选预览显示undefined(undefined)问题求助

问题分析 #

使用agRichSelectCellEditor实现多选功能时，选择过程中的预览值显示异常为undefined(undefined)，但选中后最终显示正常。核心问题是编辑状态下的预览格式化函数未处理多选数组场景，同时部分JS代码存在语法错误。

解决方案 #

以下是修正后的代码，通过调整formatValue、parseValue及valueParser的逻辑，确保编辑预览与最终显示一致：

import streamlit as st
import pandas as pd
from st_aggrid import AgGrid, GridOptionsBuilder, JsCode

df = pd.DataFrame(
    "",
    index=range(10),
    columns=["c"],
)

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_default_column(editable=True)

dic = [
    {"name": 'Pink', "code": '#FFC0CB'},
    {"name": 'Purple', "code": '#A020F0'},
    {"name": 'Blue', "code": '#0000FF'},
    {"name": 'Green', "code": '#008000'},
]

gb.configure_column(
    "c",
    cellEditor="agRichSelectCellEditor",
    # 格式化单元格最终显示值
    valueFormatter=JsCode("""
        function(params) {
            if (Array.isArray(params.value)) {
                return params.value.filter(el => el != null && el !== "").map(el => el.name).join(';');
            }
            return params.value?.name || '';
        }
    """),
    # 解析编辑后的值，转换为分号拼接的名称字符串
    valueParser=JsCode("""
        function(params) {
            const newValue = params.newValue;
            if (!newValue) return null;
            if (Array.isArray(newValue)) {
                return newValue.map(el => el.name).join(';');
            }
            return newValue.name;
        }
    """),
    cellEditorParams={
        "values": dic,
        "multiSelect": True,
        "suppressMultiSelectPillRenderer": True,
        # 修复编辑预览的格式化逻辑，处理数组和单个对象
        "formatValue": JsCode("""
            function(v) {
                if (!v) return '';
                if (Array.isArray(v)) {
                    return v.map(el => `${el.name} (${el.code})`).join(';');
                }
                return `${v.name} (${v.code})`;
            }
        """),
        # 修复parseValue的forEach语法错误
        "parseValue": JsCode("""
            function(v) {
                if (!v) return '';
                if (Array.isArray(v)) {
                    return v.map(el => el.name).join(';');
                }
                return v.name;
            }
        """),
        "allowTyping": True,
        "filterList": True,
        "valueListMaxHeight": 220,
        "searchType": "matchAny",
    },
)

gb.configure_grid_options(enableRangeSelection=True)
go = gb.build()

response = AgGrid(
    df,
    gridOptions=go,
    enable_enterprise_modules=True,
    key="grid1",
    allow_unsafe_jscode=True,
)

关键修改点 #

1. formatValue函数优化：

   • 新增数组判断逻辑，多选时将选中项按name(code)格式拼接，解决预览undefined问题
   • 增加空值判断，避免空值引发报错

2. parseValue函数修复：

   • 修正forEach语法错误（原代码未指定遍历对象）
   • 使用map+join替代手动拼接，代码更简洁可靠

3. valueParser和valueFormatter优化：

   • 使用可选链操作符?.避免空值访问报错
   • 统一处理数组和单个对象的显示逻辑
   • 用filter过滤无效值，确保结果干净

4. 参数类型修正：

   • 将multiSelect等布尔参数从字符串改为布尔值，符合AgGrid参数规范

内容的提问来源于stack exchange，提问作者K-so