Question

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

Answer 1

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

在您的情况下，在要按字词分组的列上使用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;
}

tablesorter分组小部件定制

1 个答案: