Tabloyu

Question

bu yanıltıcı olabilir biliyorum ama hiçbir şans ile bir çözüm için gayret edilmiştir, bu yüzden genişletilebilir/kapatılabilen satır/çocuk-satırdan oluşan bir tablo var:

Col1   Col2 Col3 
Node A   A  A 
    --A child 1 A1  A1 
    --A child 2 Foo  Bar 
Node B   Foo  Bar 
    --B child 1 B1  B1 
    --B child 2 Foo  Bar 

Col1   Col2 Col3 
Node B   Foo  Bar 
    --B child 1 B1  B1 
    --B child 2 Foo  Bar 
Node A   A  A 
    --A child 1 A1  A1 
    --A child 2 Foo  Bar 

: tüm alt-satırlar genişletilmiş var ve ben cOL1 sıralama am süre yani, dEĞİL tür tüm alt satır, yani sıralama col1 eğer, ben bu görmelisiniz, Düğüm A ve Düğüm B sıralamak için bekliyorum

Bu ....:

Kodum konumlanmıştır

Col1   Col2 Col3 
    --B child 1 B1  B1 
    --B child 2 Foo  Bar 
    --A child 1 A1  A1 
    --A child 2 Foo  Bar 
Node B   Foo  Bar 
Node A   A  A 

: https://jsfiddle.net/wayneye/tyxykyf3/, ben jquery table sorter kullanıyordum ama benim ihtiyacı karşılandığı sürece kullanmaya kısıtlamak yoktur: tür ebeveyn satırları değil, çocuk satırları

Lütfen nazikçe bana yardım et, HTML yapmamı/js'yi değiştirebilirsin, ya da başka lib'leri kullanabilirsin, takdir et!

Answer 1

, bu devletler (2.15.12+ tablesorter için ve 2.25.4 kullandığınız) aşağıdaki: çocuk satır

Veliler artık tablesorter-hasChildRow sınıf adı var eklendi. o sayfadaki örneğe bakacak olursak

, ayrıca alt satırlara tablesorter-childRow için bir sınıf var olduğuna dikkat edecektir.

Alt satırlarınıza tablesorter-hasChildRow ve alt satırlarınıza tablesorter-childRow eklemeniz yeterlidir.

Updated JSFiddle Here

Answer 2

Vanilya JS'de satırların bir koleksiyonunda bir sıralama işlevi yazabilirsiniz.

Fiddle: https://jsfiddle.net/vcbq843o/2/

JS: Ayrıca benim özel çözüm için formun id="A-parent" ana satırlarına bir kimliği eklemek olurdu Eğer this link here işaretlerseniz

var sortTable = function (ascending) { 
    var tableBody = document.querySelector('#tb > tbody'); 
    //Get the rows as a native js array. 
    var rows = Array.prototype.slice.call(tableBody.querySelectorAll('tr')); 
    //Native js sort function. 
    rows.sort(function(first,second){ 
    //The difference between char codes lets us sort alphabetically. 
    //If they have the same code, they will be left in the same order. 
    //This means that the children will still be in the same relative position. 
    var posFirst = first.id.charCodeAt(0); 
    var posSecond = second.id.charCodeAt(0); 
    //Subtract, based on whether we want ascending or descending. 
    return ascending ? posSecond - posFirst : posFirst - posSecond; 
    }); 

    //Add the rows back to the table in our new order. 
    for(var i=0; i<rows.length; i++) { 
     tableBody.appendChild(rows[i]); 
    } 

}