계층 적 데이터로 테이블 정렬

Question

나는 계층 적 데이터가있는 HTML 테이블이 있고 그 데이터를 정렬 할 수있는 능력을 제공해야하지만, 자식이 아닌 "부모"행만 제공해야하는 이상한 상황이 있습니다. 사실, 아이들은 부모에게 붙어 있어야하므로, 부모가 분류되면 어디든지 따라야합니다 (그러나 그들은 내부적으로 정렬 될 필요가 없습니다). 예를 들면 : 나는 "평가"를 클릭하면

, 그것은 바로 타고 함께 이동해야 굵게 표시된 등급과 아이들 (이 예에서 잡초를) 정렬해야합니다. 저를 위해 이것을 할 마법의 jquery 플러그인이 있습니까? :)

EDIT 다음은 렌더링 된 HTML을 완전히 제거한 버전입니다. 나는 이것에 대해 어느 정도의 통제권을 가지지 만, 그다지 많지는 않다. (마크 업은 원격 종단점에서 나온다.).

<table id="grid"> 
<thead> 
    <tr role="row"> 
     <th>Name</th> 
     <th>Rating</th> 
     <th>Timing</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td><b>Butyrac 200</b></td> 
     <td><b>8</b></td> 
     <td>POST</td> 
     <td>3</td> 
    </tr> 
    <tr> 
     <td>Common chickweed</td> 
     <td>4</td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>Common dandelion</td> 
     <td>4</td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td><b>Chateau</b></td> 
     <td><b>14</b></td> 
     <td>PRE</td> 
     <td>6</td> 
    </tr> 
    <tr> 
     <td>Common chickweed</td> 
     <td>10</td> 
     <td></td> 
     <td></td> 
    </tr> 
    <tr> 
     <td>Common dandelion</td> 
     <td>4</td> 
     <td></td> 
     <td></td> 
    </tr> 
</tbody> 

Answer 1

당신이 문제에 대해 말을 어떤이있는 경우, 당신은이 행이 어떻게 관련되는지를 결정하기보다는 프리젠 테이션보다는 데이터에 의존 할 수 있도록 마크 업에 추가 좀 더 구조/정의를 요청할 .

프레젠테이션의 특정 요소에 의존해야하는 것처럼 보입니다. 나중에 따라 와서 프리젠 테이션을 변경하면 누구나 논리를 매우 빨리 깨뜨릴 수 있기 때문에 이것은 매우 약해질 수 있습니다.

여기 난 단지 최상위 행이 <b> 마커를 가지고있는 가정을 만들었어요 - 당신이 당신의 정확한 요구 사항에 따라 조정해야 할 수도 있습니다.

Working Fiddle

여기에 마술, 팔꿈치 그리스의 단지 비트 :

는

var $tbody = $('#grid > tbody'); 
var topRows = []; 
var children = []; 
$tbody.find('tr').each(function (idx, ele) { 
    var $ele = $(ele); 

    if ($ele.find('td:eq(0) > b').length) { 
     // It's a parent 

     // Make new parent 
     var newParent = { ele: $ele, children: [] }; 
     topRows.push(newParent); 

     // Keep track of the children 
     children = newParent.children; 
    } else { 
     // It's a child 
     children.push($ele); 
    } 
}); 

// Sort the top level array by the value of the rating td 
topRows.sort(function(topA, topB) { 
    var valA = +topA.ele.find('td:eq(1) > b').text(); 
    var valB = +topB.ele.find('td:eq(1) > b').text(); 

    return valA - valB; 
}); 

// Detach it temporarily to avoid live DOM updates 
$tbody.detach().empty(); 

// Add the newly sorted parents back in along with their children 
$.each(topRows, function(topIdx, top) { 
    $tbody.append(top.ele); 
    $.each(top.children, function(childIdx, child) { 
     $tbody.append(child); 
    }); 
}); 

$('#grid').append($tbody);