क्रमबद्ध तालिका

Question

मैं इस मुश्किल हो सकता है, लेकिन मैं कोई भाग्य के साथ एक समाधान के लिए प्रयासरत कर दिया है, इसलिए मैं विस्तार योग्य/खुलने और बंधनेवाला पंक्ति/बाल-पंक्तियों के साथ एक मेज है:

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 छँटाई हूँ, मैं नोड एक और नोड B सॉर्ट करने के लिए उम्मीद कर रहा हूँ, नहीं तरह सभी बच्चे पंक्तियाँ, यानी, अगर तरह Col1, मैं इस देखना चाहिए:

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 

यह नहीं ....:

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/, मैं jquery table sorter उपयोग कर रहा था, लेकिन जैसा कि मेरी आवश्यकता पूरी कर जब तक इसका इस्तेमाल करने को प्रतिबंधित नहीं है: तरह माता-पिता पंक्तियाँ, नहीं बाल-पंक्तियों

कृपया मुझे एक हाथ दो, आप मेरी एचटीएमएल संरचना/जेएस बदल सकते हैं, या अन्य libs का उपयोग कर, सराहना की!

Answer 1

, यह कहा गया (tablesorter के लिए 2.15.12+, और आप 2.25.4 उपयोग कर रहे हैं) के बाद: बच्चे पंक्तियों की

माता पिता अब एक tablesorter-hasChildRow वर्ग के नाम है जोड़ा गया।

यदि आप उस पृष्ठ पर उदाहरण देखते हैं, तो आप यह भी देखेंगे कि बाल पंक्तियों tablesorter-childRow के लिए एक कक्षा है।

आपको अपने माता-पंक्ति पंक्तियों में tablesorter-hasChildRow और tablesorter-childRow को अपने बच्चे पंक्तियों में जोड़ने की आवश्यकता है।

Updated JSFiddle Here

Answer 2

वेनिला जेएस में, आप पंक्तियों के संग्रह पर एक प्रकार का फ़ंक्शन लिख सकते हैं।

फिडल: https://jsfiddle.net/vcbq843o/2/

जे एस: तुम भी मेरी विशेष समाधान के लिए प्रपत्र id="A-parent" की मूल पंक्तियों को एक आईडी जोड़ने के लिए होगा आप this link here जांच

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

}