【问题标题】:Nested jQuery Tablesorter tables, all sortable嵌套的 jQuery Tablesorter 表,全部可排序
【发布时间】:2014-03-05 01:07:45
【问题描述】:

我正在尝试让 jQuery Tablesorter 插件与嵌套表一起使用,其中内表和外表都是可排序的。外部表格的每一行通常包含一个按钮,单击该按钮时,会在其下方的行中显示一个隐藏的内部表格(尽管为简单起见,我在下面的 HTML 中跳过了该按钮,使所有内容最初都可见)。

内部表在一行中,具有“expand-child”类,这告诉 Tablesorter 在排序时将其与正上方的行保持一致。这主要是可行的,但是单击时外部表标题没有正确突出显示,并且内部表根本没有正确排序。

我知道this SO question,一种解决方案是禁用对内表的排序,但我特别希望外表和内表都是可排序的。

我的 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>

【问题讨论】:

    标签: jquery tablesorter


    【解决方案1】:

    我已经分叉了你的 jsfiddle 并使用选择器进行了更新,以便它按照我认为你想要的顺序进行排序...http://jsfiddle.net/P2DsY/

    您可以从我的 fork 中看到,您只需要具体配置表格排序器插件即可。

    【讨论】:

    • 完美,谢谢!在玩了一下 jsfiddle 之后,我发现真正需要的唯一更改是添加 tablesorter 参数 {selectorHeaders: '> thead > tr > th'}。默认值为'thead th',我现在意识到这会导致问题,因为外部表最终也会选择元素一直向下进入内部表。 > 符号使其仅查看其直接子代,而不是所有后代。我想知道您的是否应该是 tablesorter 默认值。无论如何,再次感谢!
    • 我后来在尝试禁用第一列标题的排序时遇到了另一个问题。如果添加“headers: { 0: { sorter: false } }”,它会禁用所有表的第一列,甚至是嵌套表。要单独禁用它们,请将内联元数据添加到 元素:class="{sorter: false}" (并包括 jquery.metadata.js,正如 tablesorter 文档所说的那样)。
    • 有什么变化吗?当我单击小提琴中的表头时,它不会保持父子关系。
    • @JeffBorden:那个 jsFiddle 正在使用我的 tablesorter 分支,我已经将默认子行从 expand-child 重命名为 tablesorter-childRow。我已经更新了above demo here。正如@RusselG 提到的,我已经将默认的selectorHeaders 设置为'&gt; thead th, &gt; thead td'
    • @RussellG 嵌套表的第一列也被禁用的原因是初始化函数$('table') 针对所有三个表-try this。而且由于您使用的是我的tablesorter fork(我认为),您可以在标题单元格中使用sorter-false作为类名而不是{sorter:false};我正在尝试停止使用元数据插件。
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签