нажатие кнопки должно отображать данные в ‹div› с помощью cellRenderer в ag-grid

У меня есть таблица ag-grid. Я заменяю данные столбца Bookingxml на кнопку. Когда эта кнопка нажата, она должна отображать данные этой конкретной ячейки в 'out' div. Я просмотрел документацию и решил, что cellRenderer - это способ сделать это. Я пробовал код ниже, но это не сработало.

var gridOptions = {
    columnDefs: [

        {headerName: 'Booking Type', field: 'BookingType', width: 200},
        {headerName: 'Booking Error', field: 'BookingError', width: 150 },
        {headerName: 'Booking Date', field: 'BookingDate', width: 150, filter: 'number', filterParams: {apply: true, newRowsAction: 'keep'}},
        {
            headerName: 'Booking XML', field: 'Bookingxml', width: 250, 
            cellRenderer: function (params) {

                return '<button ng-click="display()">View XML</button>';
            }

        }
    ],
    enableColResize: true,
    enableSorting: true,
    enableFilter: true

};

return gridOptions;
}

function display(xml) {
    $('#out').html(params.value);
}

jquery angularjs ag-grid-react ag-grid
person Jatin    schedule 26.09.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете попробовать использовать событие ag-grid (cellClicked) для вызова обработчика в вашем базовом классе. Затем это обрабатывает заполнение вашего html.

Для простого теста не беспокойтесь о рендерере и просто проверьте, можете ли вы обработать событие

html

(cellClicked)="onCellClicked($event)"

задний класс (угловой 2, так что ваш может отличаться)

private onCellClicked($event) {  }

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

person Matrim    schedule 26.09.2017

arrow_upward
1
arrow_downward

Я понял. Возможно, это был неправильный способ, но он сработал. Я публикую решение ниже.

{headerName: 'Booking XML', field: 'Bookingxml', width: 250, cellRenderer: 
                function(params) {
                return '<button>Expand All</button>';
                },
                onCellClicked: function (params) {

                    $('#out').html(params.value);
                }
            }
person Jatin    schedule 26.09.2017