logo标签列表

嵌套的jQuery Tablesorter表格，全部可排序

jquerytablesorter
5
我正在尝试让jQuery Tablesorter插件与嵌套表一起使用，其中内部和外部表都是可排序的。外部表的每一行通常包含一个按钮，当单击该按钮时，会在其下方刚好显示隐藏的内部表（虽然出于简单起见，我在下面的HTML中跳过了按钮，使所有内容最初都可见）。
内部表位于具有“expand-child”类的行中，这告诉Tablesorter在排序时将其与其上面的行保持在一起。这基本上是有效的，但是当单击外部表标题时，它们并没有正确地突出显示，并且内部表根本没有排序。
我知道此SO问题，并且其中一种解决方案是禁用内部表的排序，但我特别希望外部和内部表都是可排序的。
我的HTML如下，我还创建了一个jsfiddle来显示问题。感谢您的任何帮助。
<table class="tablesorter">
    <thead>
        <tr>
            <th>Make</th>
            <th>Model</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Honda</td>
            <td>Accord</td>
        </tr>
        <tr class="expand-child">
            <td colspan="2" style="padding: 0 30px 0 30px;">
                <table class="tablesorter">
                    <thead>
                        <tr>
                            <th>Doors</th>
                            <th>Colors</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Honda 2-Door</td>
                            <td>Honda Red</td>
                        </tr>
                        <tr>
                            <td>Honda 4-Door</td>
                            <td>Honda Blue</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>Toyota</td>
            <td>Camry</td>
        </tr>
        <tr class="expand-child">
            <td colspan="2" style="padding: 0 30px 0 30px;">
                <table class="tablesorter">
                    <thead>
                        <tr>
                            <th>Doors</th>
                            <th>Colors</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Toyota 2-Door</td>
                            <td>Toyota Yellow</td>
                        </tr>
                        <tr>
                            <td>Toyota 4-Door</td>
                            <td>Toyota Green</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
1个回答
6
我已经复制了你的jsfiddle，并使用选择器进行更新，以便按照我认为你想要的顺序排序... http://jsfiddle.net/P2DsY/ 从我的fork中，您可以看到您只需要具体指定表格排序插件的配置即可。
太好了，谢谢！在玩了一下你的jsfiddle之后，我发现唯一需要改变的是添加tablesorter参数{selectorHeaders：'> thead > tr > th'}。默认值为'thead th'，我现在意识到这会导致问题，因为外部表格最终会选择到内部表格中的所有元素。>符号使其只查看其直接子级，而不是所有后代。我想知道你的是否应该成为tablesorter的默认值。无论如何，再次感谢！ - Russell G
后来我遇到了另一个问题，当我尝试禁用第一列标题的排序时。如果您添加“headers：{0：{sorter：false}}”，它将禁用所有表格的第一列，甚至是嵌套的表格。要单独禁用它们，请改为向<th>元素添加内联元数据：class =“{sorter：false}”（并包括jquery.metadata.js，正如tablesorter文档所说）。 - Russell G
有什么变化吗？当我在你的fiddle中点击表头时，它没有保持父子关系。 - Jeff Borden
@JeffBorden：那个jsFiddle使用了我修改过的tablesorter分支，我已经将默认的子行名称从expand-child改为tablesorter-childRow。我已经在上面的演示中更新了。正如@RusselG所提到的，我已经将默认的selectorHeaders更改为'> thead th, > thead td'。 - Mottie
@RussellG 嵌套表格的第一列也被禁用的原因是初始化函数 $（'table'） 目标所有三个表格 - [尝试这个]（http://jsfiddle.net/Mottie/P2DsY/85/）。而且，由于您正在使用我的 tablesorter 分支（我想），所以您可以在标题单元格中使用 sorter-false 作为类名，而不是 {sorter:false}； 我正在努力摆脱使用 metadata 插件。 - Mottie
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接