jQueryテーブルソーターを非表示/グループ化されたテーブル行で動作させる

StackOverflow https://stackoverflow.com/questions/218911

  •  03-07-2019
  •  | 
  •  

質問

私は、展開すると複数のサブレコードを表示する、拡張可能および折りたたみ可能なレコードを持つ古典的なテーブルを持っています（子div / childテーブルではなく、同じ親テーブルの新しいレコードとして）。また、tablesorterを使用していますが、とても気に入っています。

問題は、tablesorterが展開された子レコードを親レコードの隣に保持していないことです。トップレベルであるかのようにソートします。そのため、テーブルが列でソートされるたびに、子の行が場所全体ではなく、私が望む場所ではなくなります。

tablesorterの適切な拡張機能や、並べ替え後もtablesorterが親行とグループ化された子行を維持できるようにする特定の構成を知っていますか？または、他のAPIを支持してtablesorterを放棄するか、独自のウィジェットを作成するいプロセスを開始する必要がありますか？テーブルの個々の行を非表示にして行を折りたたむというCSSベースのアプローチを避けるべきですか？

役に立ちましたか？

解決

tablesorterを保持したい場合、この目的で使用したmodがあります ここで利用可能

それを含めた後、2番目（展開可能な子）の行にクラス「expand-child」を持たせると、tablesorterは行をその親（前の行）とペアにしておくことがわかります。

他のヒント

実際、@ AdamBellaireが言及した mod of tablesorter が追加されました tablesorter v2.0.5 へ。 ccsChildRow <ブログの/ code>オプション。

また、興味があるなら、 tablesorterのフォークが github には多くの機能強化と便利なウィジェットがあります：）

上記を使用する代わりにUい修正を行うには、親行と子行にparentId cssクラスとchildId cssクラスを指定し、ウィジェットを使用して再調整します。誰かがこの問題に遭遇した場合に備えて。これは明らかに最高のコードではありませんが、私には有効です！

$("tbody tr[class^='parent']", table).each(function() {
 $(this).after($("tbody tr[class^='child"+$(this).attr("class").substring(6)+"']", table));
});

子rel属性を子に、親rel属性を親に割り当てることで、これを克服できました。次に、最初のテーブルをループ処理し、すべての子を非表示にして、並べ替えが完了した後にそれらを再追加します。また、トグル機能を使用して子を表示します。ここに私の解決策があります：

function lfDisplayProductInformation(id){

    if($(`[rel="child-${id}"]`).attr("hidden") === 'hidden'){
        $(`[rel="child-${id}"]`).removeAttr('hidden')
    }
    else if(!$(`[rel="child-${id}`).attr("hidden")){
        $(`[rel="child-${id}"]`).attr("hidden", true)
    }

}

$(".tablesort")
.tablesorter({
  theme: 'blue',
  showProcessing : true
})

// assign the sortStart event
.bind("sortStart",function(e, t) {
    $("tr[rel^='parent']").each(function() {
            var parentRow = $(this); 
            var tag = (parentRow.attr('rel')).split("-")[1];
            var childRow = $(`tr[rel="child-${tag}"]`)
            if(!childRow.attr("hidden")){
                childRow.attr("hidden", true)
            }
    });

})

.bind("sortEnd",function(e, t) {
    $("tr[rel^='parent']").each(function() {
            var parentRow = $(this); 
            var tag = (parentRow.attr('rel')).split("-")[1];
            var childRow = $(`tr[rel="child-${tag}"]`)
            childRow
            parentRow.after(childRow);
    });
})
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top