Tablesorter 嵌套表 - 子行（由用户按需创建）不与父行排序

Question

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

我正在使用@Mottie 的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');
    });
}

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

告诉我进展如何，希望对你有帮助，

狮子座。

Answer 2

你有没有尝试过与此不同的东西？

        $.get('/myurl?cohortid='+id, function(html) {
            parent.after('<tr class="added tablesorter-childRow"><td colspan="7" >'+html+'</td></tr>');
        });

我认为您可能会强制将元素附加到表中，并且库无法识别该行。您可以尝试将 html 附加到与父级相同的行吗？

    $.get('/myurl?cohortid='+id, function(html) {
        parent.append('<div class="added">'+html+'</div>');
    });