[英]Ag-Grid Clear Pinned columns function is not working
我正在使用ag-grid,並將金字塔應用程序后端傳遞的列和行數據替換為存儲在頁面上的'grid-options'變量-呈現網格是必需的。 網格可以工作,但是我無法使用傳遞到網格中的數據來實現包含的ag-grid特定功能(例如; clearPinned()等)。 用於定義網格的Ag-grids默認方法似乎使用硬編碼的列標題。 至少這是我在下面的示例中使用香草JS方法演示的內容:( https://www.ag-grid.com/javascript-grid-pinning/ )
網格的列固定功能正在運行。 我可以固定所有列,但是要重置它們,我必須刷新頁面。 我想使用clearPinned()方法重置列。 我將列標題存儲在名為“ allSampleTableColumns”的變量中。 我將其傳遞給gridOptions變量,而不是硬編碼的columnDefs變量。 例如,在我的清除固定功能中,我嘗試指定“樣品名稱”標簽,並在固定該列后讓清除固定重設該列。
來自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函數時,什么都沒有發生。
這是因為setColumnPinned
方法引用了所提供的colId
。 在這種情況下,您沒有ID為Sample name
的列,但有headerName
值為Sample name
的值。
為了解決這個問題,你只需要添加colId
聲明您columnDefs
對象。
最后,解決方案是使用:var colState = gridOptions.columnApi.getColumnState(); 在此處找到:ag-grid.com/javascript-grid-column-definitions
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.