Question

我正在尝试为包含下拉菜单的 AG-Grid 制作自定义单元格渲染器。选择一个选项后，我希望将下拉值导出为网格值。基本上，我需要在导出网格数据时保存下拉值。我知道使用付费版本可以更轻松地完成，但这是一个非常小的工作项目，我们没有预算来支付许可证费用。我知道我非常接近解决方案。我已经阅读并重新阅读了官方文档一百万次。据我所知，我需要告诉单元渲染器该值是什么，但我不确定如何。这是我的代码：

    <script>
        
        // set custom column definition for dropdown choices (GL)
        var customColDef = function(params) {
            var options = '<option selected disabled hidden>SVP choisir</option>'
            var GL_raw = JSON.parse({{deragon_user_data|tojson}}); // this is from my Mongo/Flask backend
            var GLs = GL_raw.GL;
            for (const [key,value] of Object.entries(GLs)) {
                options += `<option value=${value}>${key}</option>`;
            }
            var html = `<select class="form-select GL-dropdown">${options}</select>`;
            return html;
        }

        // specify the columns
        const columnDefs = [
        { headerName: "Nom", field: "Nom", width:"200px" },
        { headerName: "Date", field: "Date", width:"100px" },
        { headerName: "Province", field: "Province", width:"110px" },
        { headerName: "Description", field: "Description", width:"350px" },
        { headerName: "GL", field: "GL", width:"220px", cellRenderer: customColDef, cellEditor: 'agRichSelectCellEditor'},
        { headerName: "Commentaire", field: "Commentaire", width:"495px", editable: true, resizable: true },
        { headerName: "Frais", field: "Frais", type: 'numericColumn', width:"105px" },
        { headerName: "TPS", field: "TPS", type: 'numericColumn', width:"90px" },
        { headerName: "TVQ", field: "TVQ", type: 'numericColumn', width:"90px" },
        { headerName: "TVH", field: "TPS", type: 'numericColumn', width:"90px" },
        { headerName: "Total", field: "Total", type: 'numericColumn', width:"105px" }
        ];

        // get expenses data from DB
        const rowData = JSON.parse({{expenses|tojson}}); // this is from my Mongo/Flask backend

        // config grid options
        const gridOptions = {
            columnDefs: columnDefs,
            rowData: rowData,
            rowSelection: 'single'
        };

        // lookup grid container
        const eGridDiv = document.querySelector('#myGrid');

        // create the grid with div & options
        new agGrid.Grid(eGridDiv, gridOptions);

        // print data to console
        function getGridData(){
            console.log(gridOptions.api.getDataAsCsv());
        }

        // download csv
        function exportGridData(){
            gridOptions.api.exportDataAsCsv();
        }

        // update back-end DB with the grid's data
        function updateGridData(){
            const newData = gridOptions.api.getDataAsCsv();
            var xhttp = new XMLHttpRequest();
            xhttp.open("POST", "https://<ENDPOINT_REDACTED>/update-user", true); 
            xhttp.setRequestHeader("Content-Type", "application/json");
            xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var response = this.responseText;
            }
            };
            xhttp.send(JSON.stringify(newData));
        }
    </script>

结果截图如下：

知道我做错了什么吗？

先谢谢你！

UPDATE ：更新代码并添加结果截图。不幸的是，当我导出时，我仍然得到一个空值（即使下拉值很好）

AG-Grid 自定义单元格渲染器下拉问题

0 个答案: