Tablesorter - может ли математический виджет добавить только определенный класс? - PullRequest
0 голосов
/ 18 декабря 2018

У меня довольно сложная таблица, созданная с помощью D3 и TableSorter.У меня есть таблица в виде набора тел, чтобы воспользоваться виджетом сортировки тел, который содержит итоговую строку и подробную строку.

Я создал общую итоговую строку, в которой итоговая сумма работает, добавив ее в таблицу с помощью jQuery после того, как редуктор выполняет математические операции, но было бы здорово использовать математический виджет для добавления, а также для динамического обновленияИтого, когда мы фильтруем.Обратите внимание, что в коде моей скрипки нет фильтра, а в моем реальном проекте - нет.Вот как выглядит мой общий итог;это закодировано, чтобы быть проигнорированным сортировщиком таблиц.В идеале, я могу использовать математический виджет, чтобы выглядеть так, но обновлять динамически.

Example of how static total looks as the first tr

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

Чтобы увидеть пример того, как выглядит моя таблица, вот скрипка: пример

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

This is what I am getting instead of a totaling

                // Sorting magic
    $('#table table')
        .trigger("destroy", false)
        .tablesorter({
            theme: 'default',
            widgets: ['sortTbody', 'filter', 'zebra', 'reflow'],
            widgetOptions: {
                filter_external: '.search',
                filter_columnFilters: false,
                resizable: true,
                filter_ignoreCase: true,
                filter_columnFilters: false,
                filter_defaultFilter: {
                    12: '~{q}'
                },
                filter_excludeFilter: {
                    'th': 'range'
                },
                filter_external: '.search',
                filter_saveFilters: false,
                filter_reset: '.reset',
                sortTbody_sortRows: false,
                sortTbody_noSort: 'tablesorter-no-sort-tbody',
                sortTbody_lockHead: true,
                sortTbody_primaryRow: '.summary',
                sortTbody_sortRows: false,
                zebra: ["even", "odd"],
                usNumberFormat: true,
                // include child row content while filtering the second demo table
                filter_childRows: true,
                // class name added to make it responsive (class name within media query)
                reflow_className: 'ui-table-reflow',
                // header attribute containing modified header name
                reflow_headerAttrib: 'data-name',
                // data attribute added to each tbody cell
                // it contains the header cell text, visible upon reflow
                reflow_dataAttrib: 'data-title',
                math_data     : 'math', // data-math attribute
                math_ignore: [0, 1, 4, 5, 6, 7, 8, 9, 10, 11],
                math_none     : 'N/A', // no matching math elements found (text added to cell)
                math_textAttr : '',
                math_complete : function($cell, wo, result, value, arry) {
                    var txt = '<span class="align-decimal">' +
                      ( value === wo.math_none ? '' : '$ ' ) +
                      result + '</span>';
                    return txt;
                  },
                math_completed : function(c) {
                    // c = table.config
                    // called after all math calculations have completed
                    console.log( 'math calculations complete', c.$table.find('[data-math="all-sum"]:first').text() );
                  },
                math_prefix   : '', // custom string added before the math_mask value (usually HTML)
                math_suffix   : '', // custom string added after the math_mask value
                // event triggered on the table which makes the math widget update all data-math cells (default shown)
                math_event    : 'recalculate',
                // math calculation priorities (default shown)... rows are first, then column above/below,
                // then entire column, and lastly "all" which is not included because it should always be last
                math_priority : [ 'row', 'above', 'below', 'col' ],
                // set row filter to limit which table rows are included in the calculation (v2.25.0)
                // e.g. math_rowFilter : ':visible:not(.filtered)' (default behavior when math_rowFilter isn't set)
                // or math_rowFilter : ':visible'; default is an empty string
                math_rowFilter : ''
            }
        });
    const grandTotalRow = $("<tr><th colspan='2'>Grand Total</th><th data-math='col-sum'>col-sum</th><th data-math='col-sum'>col-sum</th><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>");
    $('#grandTotalRow').removeAttr('class', 'sorter-shortDate');
    $('.grandTd').css('background-color', 'lightsteelblue');
    $('.grandTd').removeClass('sorter-shortDate');

    $("#table thead:first").after(grandTotalRow);

Следующее, что мне, вероятно, нужно, это сказать математике, чтобы она игнорировала класс summary.Это правильно?Вероятно, обдумывая это, но пытаясь убедиться, что у меня есть все, что нужно, чтобы математика работала.

...