Сетка Ag Выровнять столбцы сетки Master Detail

Я следую документам Основная деталь Ag-Grid и пытаюсь выровнять и синхронизировать столбцы основной и подробной сетки, как указано в документах выровненная сетка. Но, похоже, это не работает с макетом основной детали.

Я занялся отладкой Ag-grid alignedGridService и обнаружил, что переданная конфигурация сетки должна иметь справка по API сетки, который используется для привязки событий сетки в обеих сетках.

// iterate through the aligned grids, and pass each aligned grid service to the callback
const otherGrids = this.gridOptionsWrapper.getAlignedGrids();
if (otherGrids) {
    otherGrids.forEach((otherGridOptions: GridOptions) => {
        if (otherGridOptions.api) {
            const alignedGridService = otherGridOptions.api.__getAlignedGridService();
            callback(alignedGridService);
        }
    });
}

это не относится к сеткам деталей, поскольку они не имеют ссылок на API, когда выполняется приведенный выше код, я думаю, вероятно, потому, что сетка деталей создается только тогда, когда это необходимо, и, во-вторых, ее конфигурация будет повторно использоваться для каждой сетки деталей, поэтому их объекты API не часть конфигурации, а не часть основной конфигурации, согласно документам, доступ к подробному API ref можно получить, используя,

// lookup a specific DetailGridInfo by id, and then call stopEditing() on it
var detailGridInfo = masterGridOptions.api.getDetailGridInfo('someDetailGridId');
detailGridInfo.api.stopEditing();

// iterate over all DetailGridInfo's, and call stopEditing() on each one
masterGridOptions.api.forEachDetailGridInfo(function(detailGridInfo) {
    console.info("detailGridInfo: ", detailGridInfo);
    // then e.g. call stopEditing() on that detail grid
    detailGridInfo.api.stopEditing();
});

а с другой стороны, вот что я пытаюсь сделать, следуя документам выровненных сеток,

/** HIDE SCROLL FOR DETAIL GRID **/
// detailConfig.suppressHorizoHntalScroll = true;

/** SET DETAIL GRID AS THE ALIGNED GRID */
this.masterGridOptions.alignedGrids = [this.detailGridOptions];

что, очевидно, кажется неправильным в этом случае, я думаю, мне может понадобиться внедрить пользовательскую реализацию, чтобы связать оба события сетки вместе, но я не уверен, с чего начать, или даже если это возможно,

Во-вторых, кажется, что настройка autoHeight: true, по-видимому, не влияет на высоту сетки деталей, в основном то, что я пытаюсь сделать, это освободить полосы прокрутки сетки деталей, потому что в ней не должно быть много строк. В соответствии с документами вы можете либо указать статическую высоту, либо указать высоту во время выполнения, но не появляется возможность автоматического определения высоты,

// option 1 - fixed detail row height, sets height for all details rows
masterGridOptions.detailRowHeight = 500;

// option 2 - dynamic detail row height, dynamically sets height for all rows
masterGridOptions.getRowHeight = function (params) {
    var isDetailRow = params.node.detail;
    if (isDetailRow) {
        var detailPanelHeight = params.data.children.length * 50;
        // dynamically calculate detail row height
        return detailPanelHeight;
    } else {
        // for all non-detail rows, return 25, the default row height
        return 25;
    }
}

В моем случае в ячейках может быть более длинная длина текстов, и я хочу, чтобы строки автоматически переносились и имели переменную высоту, а не ограничивали их определенной высотой, по причине, по которой я использовал autoHeight, но это также не влияет здесь.

вот стекБлиц, который демонстрирует обе проблемы, можно сказать, что схема Master/Detail, вероятно, не подходит для данного варианта использования, и вместо этого может быть хороша простая древовидная компоновка, но при условии, что подробные сетки могут иметь свои собственные заголовки и предоставить то, что невозможно с древовидным представлением, я склонен к использованию основного/подробного представления.

Любая помощь, которая может помочь мне решить обе эти проблемы, очень ценится.

Обновлено: Я заставил выровненные сетки частично работать, используя:

detailGridOptions.alignedGrids = [masterGridOptions];
detailGridOptions.onGridReady = (params) => {
    /** SET DETAIL GRID AS THE ALIGNED GRID */
    masterGridOptions.api.alignedGrids = [];
    masterGridOptions.api.forEachDetailGridInfo((params: DetailGridInfo, index) => {
        masterGridOptions.api.alignedGrids.push(params);
    });
}

ЗАМЕТКА: Из-за виртуальной прокрутки сетки приходилось обновлять masterGridOption.alignedGrids при каждом обратном вызове onGridReady подробностей, потому что даже расширенные сетки деталей уничтожаются и генерируются заново.

Теперь, помимо того, что строки подробной и основной сетки действительно следуют autoHeight, единственное, что я хотел бы, - это также выровнять не общие столбцы между основным и подробным, например.

  • изменение размера столбца имени мастера должно изменить размер столбца имени или фамилии детали, чтобы они оставались синхронизированными, и наоборот
  • Скрытие столбца имени мастера должно скрывать оба столбца имени f name и l name.
  • Также из-за этих двух подстолбцов (имя f и имя l), соответствующих основному столбцу «имя», переупорядочивание кажется нарушенным,

Вы заставили это работать? У меня было аналогичное требование, когда я также пытался исключить заголовки столбцов в подробной сетке, поскольку они оказались одинаковыми. Однако хотелось бы, чтобы столбцы сетки изменялись в соответствии с мастером. Кроме того, мой выбор основной детали вместо древовидной сетки связан с тем, что моей вложенной сетке требуются детали строки для некоторых данных.

Anand Nadar 20.08.2019 16:19
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
1
2 174
0

Другие вопросы по теме