Question

我有一个非常复杂的表，它是由D3和TableSorter制成的。我将表格作为一堆tbodies来利用sortTbodies小部件，该小部件包含摘要行和明细行。

我创建了一个总计总数行，通过在化简器进行数学运算后将其附加到jQuery的表中来实现总计，但是使用数学小部件添加以及在以下情况下动态更新总计将是很棒的我们过滤。请注意，我的小提琴的代码上没有过滤器，但是我的真实项目中有过滤器。这是我的总数的样子；它被编码为由表排序器忽略。理想情况下，我可以使用math小部件看起来像这样，但是可以动态更新。

我的想法是，我想获取详细信息行类的所有tds的特定列的总计，以便计算总计并在我们筛选最适合数学小部件的位置时更改总计。

要查看我的桌子外观的示例，请参见以下提示：example

根据我所看到的，我需要指出我们要忽略的列，然后对不想总计的内容进行数据标记。我似乎不太想添加它，因为我得到的结果是，我假设这将添加几乎所有内容，包括我要忽略的类。

                // 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类。这是正确的吗？可能是对此进行了过度思考，但尝试确保我拥有使数学正常运行所需的一切。

Tablesorter-数学小部件只能添加特定的类吗？

0 个答案: