jQuery Tablesterter가 숨겨진/그룹화 된 테이블 행으로 작동하도록하기

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

  •  03-07-2019
  •  | 
  •  

문제

확장 가능한 경우 확장 가능하고 접을 수있는 레코드가있는 클래식 테이블이 있습니다. 나는 또한 Tables기를 사용하고 있으며 절대적으로 그것을 좋아합니다.

문제는 테이블 러가 부모 기록 옆에 확장 된 아동 기록을 유지하지 않는다는 것입니다. 마치 최고 수준 인 것처럼 분류합니다. 따라서 테이블이 열로 정렬 될 때마다 어린이 행은 내가 원하는 곳이 아닌 곳에서 끝납니다.

테이블 러가 정렬 후에도 아동 행을 부모 행과 함께 유지할 수 있도록 테이블 orter 또는 특정 구성에 대한 확장이 좋은 사람이 있습니까? 아니면 다른 API에 찬성하여 테이블 리터를 포기하거나 내 위젯을 작성하는 추악한 프로세스를 시작해야합니까? 붕괴 행을 나타 내기 위해 테이블의 개별 행을 숨기는 CSS 기반 접근법을 피해야합니까?

도움이 되었습니까?

해결책

테이블 포트를 유지하려면이 목적으로 사용한 모드가 있습니다. 여기에서 사용할 수 있습니다

그것을 포함시킨 후에, 당신은 두 번째 (확장 가능한 자식) 행에 클래스 "확장 자식"을 가지고 있으며, 테이블 orter는 행을 부모와 짝을 이루는 것을 알 것입니다 (선행 행).

다른 팁

사실, 그 테이블 리터의 모드 @adambellaire에 의해 언급되었습니다 테이블 러 v2.0.5. 나는 문서화했다 사용 방법 ccsChildRow 옵션 내 블로그에서.

또한 관심이 있으시면 테이블 포트 포크 ~에 github 많은 개선 사항과 유용한 위젯이 있습니다 :)

위의 것을 사용하는 대신 Ugly Fix에는 부모 및 아동 행을위한 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