tablesorter分組部件定製

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; 
}