表格排序器分组小部件自定义

Question

我有一个要求，我需要能够根据用户的选择按表中的特定列进行分组。我需要镜像 jqgrid 文档中所示的动态分组功能。我正在使用表格排序器分组机制。最初我尝试了运行良好的 jqGrid，但我们无法根据我们的要求自定义 css。我正在使用 tablesorter 和分组小部件。 现在使用这个组合，我可以看到您只需单击列标题即可按表中的所有列进行分组，我需要对其进行限制。所以，基本上我需要加载带有分组的特定列的表，然后当用户单击其他列时，只应该进行排序。此外，在对小部件进行分组时，只考虑第一个字母而不是整个单词。我检查了分组代码，并且使用了一个拆分功能，应该对其进行修改。谁能指出我实现目标的正确方向

Answer 1

分组小部件允许您将其设置为按字母、单词、分隔符、日期分组并禁用列分组 - 请参阅“标题类名称”部分以了解可以使用的 full list class names。

在您的情况下，在要按单词分组的列上使用 group-word 类名，并使用 group-false 禁用分组 (demo)

HTML

<table class="tablesorter">
    <thead>
        <tr>
            <th class="group-word">AlphaNumeric</th>
            <th class="group-false">Numeric</th>
            <th class="group-false">Animals</th>
            <th class="group-false">Sites</th>
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

脚本

$('table').tablesorter({
    theme: 'blue',
    sortList: [ [0, 0] ],
    widgets: ['zebra', 'group']
});

CSS（可折叠箭头）

/* collapsed arrow */
 tr.group-header td i {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid #888;
    border-right: 4px solid #888;
    border-left: 4px solid transparent;
    margin-right: 7px;
    user-select: none;
    -moz-user-select: none;
}
tr.group-header.collapsed td i {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #888;
    border-right: 0;
    margin-right: 10px;
}