使用agRichSelectCellEditor时不显示用于输入的输入文本框

Question

我试图按照教程（https://www.ag-grid.com/javascript-data-grid/provided-cell-editors-rich-select/）添加带有agRichSelectCellEditor的列，以便用户可以选择具有下拉列表的单元格，允许在搜索时键入。我可以找到下拉菜单，但没有用于输入的文本框。我的代码看起来与示例完全相同。

<style media="only screen">
    html,
    body {
        height: 100%;
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }

    html {
        position: absolute;
        top: 0;
        left: 0;
        padding: 0;
        overflow: auto;
    }

    body {
        padding: 1rem;
        overflow: auto;
    }
</style>
<script>
    const colors = [
        'AliceBlue',
        'Azure',
        'Beige',
        'BurlyWood',
        'CadetBlue',
        'Cyan',
        'DarkBlue',
        'Wheat',
        'WhiteSmoke',
        'Yellow',
        'YellowGreen'
    ];

    function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
    class ColourCellRenderer {


        init(params) {
            const eGui = this.eGui = document.createElement('div');
            eGui.style.overflow = 'hidden';
            eGui.style.textOverflow = 'ellipsis';

            const { value } = params;
            const colorSpan = document.createElement('span');
            const text = document.createTextNode(_nullishCoalesce(value, () => ('')));

            if (value != null) {
                colorSpan.style.borderLeft = '10px solid ' + params.value;
                colorSpan.style.paddingRight = '5px';
            }

            eGui.appendChild(colorSpan)
            eGui.append(text);
        }

        getGui() {
            return this.eGui;
        }

        refresh() {
            return false
        }
    }

    const columnDefs = [
        {
            headerName: "Allow Typing (Match)",
            field: "color",
            cellRenderer: ColourCellRenderer,
            cellEditor: "agRichSelectCellEditor",
            cellEditorParams: {
                values: colors,
                searchType: "match",
                allowTyping: true,
                filterList: true,
                highlightMatch: true,
                valueListMaxHeight: 220,
            },
        },
        {
            headerName: "Allow Typing (MatchAny)",
            field: "color",
            cellRenderer: ColourCellRenderer,
            cellEditor: "agRichSelectCellEditor",
            cellEditorParams: {
                values: colors,
                searchType: "matchAny",
                allowTyping: true,
                filterList: true,
                highlightMatch: true,
                valueListMaxHeight: 220,
            },
        },
    ];

    function getRandomNumber(min, max) {
        // min and max included
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    const data = Array.from(Array(20).keys()).map(() => {
        const color = colors[getRandomNumber(0, colors.length - 1)];
        return { color };
    });

    let gridApi;

    const gridOptions = {
        defaultColDef: {
            flex: 1,
            editable: true,
        },
        columnDefs: columnDefs,
        rowData: data,
    };

    // setup the grid after the page has finished loading
    document.addEventListener("DOMContentLoaded", () => {
        const gridDiv = document.querySelector("#myGrid");
        gridApi = agGrid.createGrid(gridDiv, gridOptions);
    });
</script>

<div class="grid-container" style="height: 100%; width: 100%">
    <div id="myGrid" class="ag-theme-alpine" style="height: 100%"></div>
</div>

我想知道是否需要包含任何特定版本的 ag grid 脚本。请帮忙！谢谢！

嘎布

Answer 1

您似乎正在尝试使用企业功能。请检查是否：

1. 您已添加 Ag-Grid 企业的进口。
2. 您已将有效的许可证密钥添加到您的应用程序中。