Свернуть / развернуть группы кликов с помощью Angular DataTable - PullRequest
Новая
       13

Свернуть / развернуть группы кликов с помощью Angular DataTable

0 голосов
/ 14 июля 2020

Я использую Angular datatable с Angular 8. Я пытаюсь реализовать этот пример сделано с jQuery, но проблема в том, что я использую группа строк в моем коде: 

this.dtOptions = {
      order: [[2, 'asc']],
      rowGroup: {
        // Uses the 'row group' plugin
        dataSrc: 2,
        startRender: function (rows, group) {
            var collapsed = !!collapsedGroups[group];

            rows.nodes().each(function (r) {
                r.style.display = collapsed ? 'none' : '';
            });    

            // Add category name to the <tr>. NOTE: Hardcoded colspan
            return $('<tr/>')
                .append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
                .attr('data-name', group)
                .toggleClass('collapsed', collapsed);
        }
      },
      processing : true,
      //retrieve: true,
      destroy: true,
      pagingType: 'full_numbers',
      // Declare the use of the extension in the dom parameter
      dom: 'Bfrtip',
      // Configure the buttons
      buttons: [],
      columnDefs: [],
      responsive: false,
      scrollX: true,
      drawCallback: function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null; 

        api.column(3 /*this is index of column that you want to make group on it*/ , {page:'current'} ).data().each( function ( group, i ) {
        

            if ( last !== group ) {
                $(rows).eq( i ).before(
                    '<tr style="background-color:#dedede" class="group"><th colspan="5">'+group+'</th></tr>'
                ); 
                last = group;
            }
        });
     }
};

Я получаю следующую ошибку:

Введите '{order: (string | number) [] []; rowGroup: {dataSr c: число; startRender: (строки: любые, группа: любые) => JQuery; }; обработка: true; уничтожить: правда; pagingType: строка; ... еще 5 ...; drawCallback: (настройки: SettingsLegacy) => void; } »не может быть назначен типу« Настройки ». Литерал объекта может указывать только известные свойства, а rowGroup не существует в типе Settings.

Примечание. Моя html страница похожа на пример, который я упомянул ниже. заголовок: 

<table id="example" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" dt-instance="dtInstance" class="table-bordered compact cell-border compact stripe hover" width="100%" cellspacing="0">

Обновление: Я добавил необходимые плагины в angular. json

"styles": [
    ...
    "node_modules/datatables.net-rowgroup-dt/css/rowGroup.dataTables.min.css"
],
"scripts": [
    ...
    "node_modules/datatables.net-rowgroup-dt/js/rowGroup.dataTables.min.js"
]
...