Question

我正在使用ag-grid，尝试实现全宽行...以扩展最后一列＆＃34;查询＆＃34;。但只有查询出现在行中。

任何帮助都将不胜感激。

export class FullWidthCellRenderer {
        public eGui: any;

        // gets called once before the renderer is used
        public init(params) {
            // create the cell
            //this.eGui = document.createElement('div');
            //this.eGui.innerHTML = this.getTemplate(params);

            let eTemp = document.createElement('div');
            eTemp.innerHTML = this.getTemplate(params);
            this.eGui = eTemp.firstElementChild;


            // set value into cell
            //this.eValue.innerHTML = params.value;
        };

        // gets called once when grid ready to insert the element
        public getGui() {
            return this.eGui;
        };

        public getTemplate(params) {
            // the flower row shares the same data as the parent row
            let data = params.node.data;

            let template =
                '<div class="full-width-panel">' +
                '  <div class="full-width-center">' + data.Query +
                '  </div>' +
                '</div>';

            return template;
        };
    }

＆＃34; gridOptions＆＃34;如下

this.gridOptions = <GridOptions>{
        columnDefs : [
            { headerName: "Name", field: "Name", width: 150},
            { headerName: "abc", field: "abc", width: 150 },
            { headerName: "def", field: "def", width: 150 },
            {
                headerName: "Query", field: "Query", width: 150,
                cellRenderer: "group",

                //cellRendererFramework: {
                //    component: GroupComponent
                //},

                cellRendererParams: { innerRenderer: queryCellRenderer }
            }
        ],
        isFullWidthCell: function (rowNode) {               
            return true;
        },

        fullWidthCellRenderer: FullWidthCellRenderer,

        getRowHeight: function (params) {               
            return 200;
        },
        onGridReady: function (params) {
            // when grid is ready, expand Ireland and UK automatically
            params.api.forEachLeafNode(function (rowNode) {                   
                    rowNode.expanded = true;                  
            });
            params.api.onGroupExpandedOrCollapsed();
        },
        // return true, meaning all data can flower

        doesDataFlower: function (dataItem) {              
            return true;
        }
    };

Answer 1

isFullWidthCell 不应该始终为true。试试这个：

isFullWidthCell: (rowNode: RowNode) => { return rowNode.level === 1; }

来源：https://www.ag-grid.com/javascript-grid-master-detail/

ag-grid FullWidthCellRenderer正在替换整行

1 个答案: