Я использую ag-grid и заменил данные столбцов и строк, переданные из серверной части моего приложения-пирамиды в переменную grid-options, хранящуюся на моей странице, - необходимую для визуализации сетки.Сетка работает, но я не могу реализовать включенные специальные функции ag-grid (например, clearPinned () и т. Д.), Используя данные, которые я передаю в сетку.По умолчанию в Ag-сетках для определения сетки используются жестко закодированные заголовки столбцов.По крайней мере, это то, что продемонстрировано в следующем примере с использованием метода JS vanilla: (https://www.ag -grid.com / javascript-grid-pinning / )
Столбецфункционирование закрепления для сетки работает.Я могу закрепить все столбцы, но чтобы сбросить их, мне нужно обновить страницу.Я хочу сбросить столбцы, используя метод clearPinned ().Я храню заголовки моих столбцов в переменной с именем allSampleTableColumns.Я передаю это в переменную gridOptions вместо жестко закодированной переменной columnDefs.Например, в моей функции четкого закрепления я пытаюсь указать метку 'Sample name', и после этого закрепления очищенного закрепления сбрасываю этот столбец.
Метод из 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, ничего не происходит.