Ag-Grid 清除固定列功能不起作用

Question

我正在使用 ag-grid 并将从我的金字塔应用程序后端传递的列和行数据替换为存储在我的页面上的“grid-options”变量 - 渲染网格所需的。网格工作，但我无法使用我传递到网格的数据来实现包含的 ag-grid 特定功能（例如；clearPinned(); 等）。用于定义网格的 Ag-grids 默认方法似乎使用硬编码的列标题。至少在我下面的示例中使用香草 JS 方法演示了这一点：(https://www.ag-grid.com/javascript-grid-pinning/)

网格的列固定功能正在运行。我可以固定所有列，但为了重置它们，我必须刷新页面。我想使用 clearPinned() 方法重置列。我将列标题存储在一个名为“allSampleTableColumns”的变量中。我将它传递给 gridOptions 变量而不是硬编码的 columnDefs 变量。例如，在我的 clear pinned 函数中，我试图指定“示例名称”标签，并在我将其固定后让 clear pinned 重置该列。

来自带有硬编码列标题的 ag-grid 方法：

HTML：

<div style="padding: 4px;">
    <button onclick="clearPinned()">Clear Pinned</button>
    <button onclick="resetPinned()">Left = #, Athlete, Age; Right = Total
    </button>
    <button onclick="pinCountry()">Left = Country</button>
</div>

JS：

var columnDefs = [
            {headerName: "#", colId: "rowNum", valueGetter: "node.id", width: 40, pinned: 'left'},
            {headerName: "Athlete", field: "athlete", width: 150, pinned: 'left'},
            {headerName: "Age", field: "age", width: 90, pinned: 'left'},
            {headerName: "Country", field: "country", width: 120},
            {headerName: "Year", field: "year", width: 90},
            {headerName: "Date", field: "date", width: 110},
            {headerName: "Sport", field: "sport", width: 110},
            {headerName: "Gold", field: "gold", width: 100},
            {headerName: "Silver", field: "silver", width: 100},
            {headerName: "Bronze", field: "bronze", width: 100},
            {headerName: "Total", field: "total", width: 100, pinned: 'right'}
        ];


     var gridOptions = {
            defaultColDef: {
                resizable: true
            },
            columnDefs: columnDefs,
            debug: true,
            rowData: null
        };


    function clearPinned() {
            gridOptions.columnApi.setColumnPinned('rowNum', null);
            gridOptions.columnApi.setColumnPinned('athlete', null);
            gridOptions.columnApi.setColumnPinned('age', null);
            gridOptions.columnApi.setColumnPinned('country', null);
            gridOptions.columnApi.setColumnPinned('total', null);
        }

---

我的代码：

我使用的是列 refs ()，而不是：

var allSampleTableColumns = [{label:"sampleId", field:"sampleId", type:"string", pinned: 'left', lockPinned: true, cellClass: 'lock-pinned'}].concat(dataFromPython.sampleTable.columns.map(function(item) { return {label: item, field: item, type:"string"}}));

列标题来自我的金字塔应用程序传递给页面的python变量：dataFromPython.sampleTable.columns

它是一个包含所有所需列标题的对象数组：

[{ "label": "sampleId", "field": "sampleId", "type": "string", "pinned": "left", "lockPinned": true, "cellClass": "lock-pinned" }, { "label": "Replicate Group ID", "field": "Replicate Group ID", "type": "string" }, { "label": "Sample name", "field": "Sample name", "type": "string" }, { "label": "Sample name long", "field": "Sample name long", "type": "string" }, { "label": "Sample Type", "field": "Sample Type", "type": "string" }, { "label": "Sample type long", "field": "Sample type long", "type": "string" }, { "label": "Generic sample type", "field": "Generic sample type", "type": "string" }, { "label": "Generic sample type long", "field": "Generic sample type long", "type": "string" }, { "label": "Sample Description", "field": "Sample Description", "type": "string" }, { "label": "Tissue/organism part", "field": "Tissue/organism part", "type": "string" }, { "label": "Parental cell type", "field": "Parental cell type", "type": "string" }, { "label": "Final cell type", "field": "Final cell type", "type": "string" }, { "label": "Cell line", "field": "Cell line", "type": "string" }, { "label": "Reprogramming method", "field": "Reprogramming method", "type": "string" }, { "label": "Developmental stage", "field": "Developmental stage", "type": "string" }, { "label": "Media", "field": "Media", "type": "string" }, { "label": "Disease State", "field": "Disease State", "type": "string" }, { "label": "Labelling", "field": "Labelling", "type": "string" }, { "label": "Genetic modification", "field": "Genetic modification", "type": "string" }, { "label": "FACS profile", "field": "FACS profile", "type": "string" }, { "label": "Age", "field": "Age", "type": "string" }, { "label": "Organism", "field": "Organism", "type": "string" }]

我将它传递给我的 ag-grid gridOptions 变量：

var gridOptions = {
        defaultColDef: {
            resizable: true
        },
        columnDefs: allSampleTableColumns,
        debug: true,
        rowData: dataFromPython.allSampleTable,
    };

我的 clearPinned 函数看起来像这样，我试图指定在我固定后要重置哪一列（“样本名称”）。

clearPinned: function(){
                gridOptions.columnApi.setColumnPinned(this.allSampleTableColumns['Sample name'], null);
            }

预计点击清除固定按钮会将所有列重置为指定的布局（默认情况下，只有一列，sampleId 应固定）。当我调用 clearPinned 函数时什么都没有发生。

Answer 1

这是因为setColumnPinned 方法引用了提供的colId。在这种情况下，您没有 id 为 Sample name 的列，但您有一个值为 Sample name 的 headerName。

要解决此问题，您只需将 colId 声明添加到您的 columnDefs 对象。

Answer 2

最终解决方案是使用： var colState = gridOptions.columnApi.getColumnState();在这里找到：ag-grid.com/javascript-grid-column-definitions