javascript - Tablesorter 嵌套表 - 子行(由用户按需创建)不与父行一起排序

Question

在我的应用程序中，我曾经有一个超过 1000 行的页面，这变得很荒谬。基础数据是高度结构化的，因此该页面现在加载包含所有父数据的表。每个父行都有一个按钮，单击该按钮时，会在表中创建一个子行，然后在 HTML 中加载(所有子行的表)。

我正在使用@Mottie's fork of Tablesorter ，他的演示表明这应该有效；当您对父列进行排序时，子表将保留在父表中。但这对我来说不起作用，我不明白为什么。

(作为背景，我使用 Jinja2 进行模板化，这就是您在下面的 HTML 中看到一些语法的原因。)

谁能帮我找出问题所在吗？

父表的JS如下:

<script type="text/javascript">
$(function(){
    $.tablesorter.themes.bootstrap = {
      table        : 'table table-condensed table-bordered table-striped table-hover',
      caption      : 'caption',
      header       : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
      iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
      iconSortAsc  : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
      iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
    };  
    $("#seedcohorts").tablesorter({
        theme: 'bootstrap',
        sortList:[[3,0]],
        sortInitialOrder: 'asc',
        headerTemplate : '{content} {icon}',
        widgets : [ "uitheme", "zebra" ],
        widgetOptions : {
              zebra : ["even", "odd"],
            },
        dateFormat: 'mm/yyyy',
        selectorHeaders: '> thead > tr > th',
    });
});
$(document).ready(function(){ 
    $('#seedcohorts').on('click', ".toggleCohort", function () {
        var thisRow = $(this).parents('tr.adder');
        var hasNextRow = thisRow.next('tr.added').length;
        if (hasNextRow) {
            thisRow.next('tr.added').remove();
        } else {
            var parent = $(this).parents('tr.adder'), id = parent.attr('id');
            $.get('/myurl?cohortid='+id, function(html) {
                parent.after('<tr class="added tablesorter-childRow"><td colspan="7" >'+html+'</td></tr>');
            });
        }
    });
    $(document).on('click','a.collapsed', function () {
        var id = this.id;
        $(this).addClass('expanded');
        $(this).removeClass('collapsed');
        $('a#'+id+' button').html('<i class="fa fa-minus" aria-hidden="true"></i>');
    });
    $(document).on('click','a.expanded', function () {
        var id = this.id;
        $(this).addClass('collapsed');
        $(this).removeClass('expanded');
        $('a#'+id+' button').html('<i class="fa fa-plus" aria-hidden="true"></i>');
    });
});
</script>

这是父表的 HTML:

<div class="table-responsive">
<table id="seedcohorts" class="tablesorter table table-striped table-bordered table-condensed table-hover" >
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">Name</th>
            <th scope="col">Location</th>
            <th scope="col">Date</th>
            <th scope="col">Number</th>
            <th scope="col">Dollar data</th>
            <th scope="col">Dollar data 2</th>
        </tr>
    </thead>
    <tbody>
        {% for entry in cohortlist %}
        <tr class="adder" id="{{entry.key().id()}}">
            <td>
                <a href="javascript:void(0)" id="{{entry.key().id()}}" class="toggleCohort collapsed">
                    <button class="btn btn-xs disabled"><i class="fa fa-plus" aria-hidden="true"></i></button>
                </a>
            </td>
            <td>{{ entry.name }}</td>
            <td>{{ entry.loc_city}}, {{entry.loc_country}}</td>
            <td>{{ entry.cohort_date.month }}/{{ entry.cohort_date.year }}</td>
            <td>{{ entry.num_cos }}</td>
            <td>${{ entry.total_value|newnumber }}</td>
            <td>${{ entry.total_funding|newnumber }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>

子表的JS如下:

<script type="text/javascript">
$(function(){
    $.tablesorter.themes.bootstrap = {
      table        : 'table table-condensed table-bordered table-striped table-hover',
      caption      : 'caption',
      header       : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
      iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
      iconSortAsc  : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
      iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
    };
$("#mytable-{{cohort.key().id()}}").tablesorter({
    theme: 'bootstrap',
    sortList:[[5,1]],
    sortInitialOrder: 'desc',
    headerTemplate : '{content} {icon}',
    widgets : [ "uitheme", "zebra" ],
    widgetOptions : {
          zebra : ["even", "odd"],
        },
    dateFormat: 'mm/yyyy',
    selectorHeaders: '> thead > tr > th',
    });
});
</script>

这是子表的 HTML:

<table id="mytable-{{cohort.key().id()}}" class="tablesorter-child table table-striped table-bordered table-condensed" >
    <thead>
        <tr>
            <th scope="col">Status</th>
            <th scope="col">Company</th>
            <th scope="col">Details</th>
            <th scope="col">Dollar value</th>
            <th scope="col"></th>
            <th scope="col">Dollar value 2</th>
        </tr>
    </thead>
    <tbody>
        {% for entry in listofcohortcompanies %}
        <tr>
            <td></td>
            <td>{{ entry.name }}</td>
            <td>{{ entry.website }}</td>
            <td>${{ entry.exit_value|newnumber }}</td>
            <td></td>
            <td>${{ entry.total_funding|newnumber }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

Answer 1

我一直在研究你的代码，我要做的就是迭代表，找到打开的 id，将它们存储在一个数组中，然后删除那些“tabledsorter-childRow”，在完成我的操作之后所做的就是迭代 ids 数组，然后再次单击那些打开的数组，这是我的代码:

/* Function for leaving the array with only unique id's */
function unique(array) {
    return $.grep(array, function(el, index) {
        return index === $.inArray(el, array);
    });
}

/* Find all id's of tablesorters that are open and store them in the variable "arrayIds" */
var arrayIds = [];
$('.tablesorter-childRow').each(function(item){
    arrayIds.push($(this).find('table').attr('id').split('-')[1]);
    //Here we remove the tables
    $(this).remove();
});

//Here we leave the array with only unique id's in case more than one is selected
arrayIds = unique(arrayIds);

//Lastly, we cycle through the id's, and also through each button so that we can click it again.
var i;
for (i = 0; i < arrayIds.length; ++i) {
    $('#seedcohorts a#'+arrayIds[i]).each(function(){                       
        $(this).click();
        $(this).find('i').removeClass('fa-plus').addClass('fa-minus');
    });
}

当用户点击排序列时，此代码必须位于代码末尾。

让我知道进展如何，希望有所帮助，

狮子座。