首页 > 解决方案 > 在上下文菜单上的 Ag Grid Enterprise React 上使用未转义的“#”字符

问题描述

当我Ag-Grid在应用程序上使用上下文菜单时,我在控制台上收到一条消息:

[弃用] 在数据 URI 正文中使用未转义的“#”字符已被弃用,并将在 2018 年 7 月左右在 M68 中删除。请改用“%23”。有关详细信息,请参阅https://www.chromestatus.com/features/5656049583390720 。

我真的没有收到任何错误,但我害怕消息。任何人都可以更新有关此消息的任何内容吗?

这是使用 this.sate.columnDefs 和 renderframework 的组件,如下所示:

     <AgGridReact
                        // properties
                        columnDefs={this.state.columnDefs}
                        rowData={consumers.items}
                        animateRows
                        enableColResize
                        enableSorting={true}
                        rowSelection="single"
                        suppressMenuHide={true}
                        enableFilter={true}
                        onCellClicked={this.onCellClicked.bind(this)}
                        onGridReady={this.state.onGridReady}
                        paginationPageSize={10}
                        pagination={true}
                        multiSortKey="ctrl"
                        getContextMenuItems={this.state.getContextMenuItems}
                    />

  columnDefs: [
                {
                    headerName: "",
                    suppressFilter: true,
                    width: 30,
                    cellRendererFramework: function (params) {
                        if (params.data.permissions.length > 0) {
                            return <i className="fa fa-ellipsis-v" />;
                        }
                    }
                },
                {
                    headerName: language.LAST_NAME,
                    field: "person.last_name",
                    enableRowGroup: true,
                    filter: "agSetColumnFilter",
                },
                {
                    headerName: language.FIRST_NAME,
                    field: "person.first_name",
                    enableRowGroup: true,
                    filter: "agSetColumnFilter",
                }
              
               
            ],
            sortingOrder: ["desc", "asc", null],
            getContextMenuItems:          this.getContextMenuItems.bind(this),
            onGridReady: function (params) {

                var sort = [
                    {
                        colId: "person.last_name",
                        sort: "asc"
                    },
                    {
                        colId: "person.first_name",
                        sort: "asc"
                    },
                    {
                        colId: "medical_id",
                        sort: "asc"
                    },
                    {
                        colId: "person.date_of_birth",
                        sort: "asc"
                    }
                ];
                this.gridApi = params.api;
                this.gridApi.setSortModel(sort);
                params.api.sizeColumnsToFit();
            }

  getContextMenuItems(params) {
        let language = languageActions.getLanguage();
        const { props } = this;
        this.setState({
            showActionDiv: false
        });
        var aResult = [];
        params.node.data.permissions.map((permision, index) => {
            let language = languageActions.getLanguage();
            switch (permision) {
                case "Update":
                    aResult.push(
                        {
                            name: language.VIEW_DETAIL,
                            icon: '<span class="fa fa-edit icon-ag-grid"></span>',
                            action: () => {
                                //console.log(this.props);
                                this.props.toggleShowProfile();
                            }
                        }
                    );
                    break;
                case "Read":
                    aResult.push(
                        {
                            name: language.VIEW_SCHEDULE,
                            icon: '<span class="fa fa-calendar icon-ag-grid"></span>',
                            action: () => {
                                this.props.toggleShowScheduledServices();
                            }
                        }
                    );
                    break;
            }
        });
        aResult.push(
            "separator",
            "copy",
            "csvExport",
            "excelExport",
            "autoSizeAll");
        return aResult;
    }

标签: ag-grid-react

解决方案


推荐阅读