Question

我正在使用针对jQuery的Tablesorter插件，并试图在其中添加一个非常简单的分组功能。使用以下html / js工作得很好，直到您再次单击排序并反转顺序。发生这种情况时，标题会移动到组的底部。以下是我的（非常hacky）尝试。有没有人有任何想法？

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Table Manipulation Test</title>
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.1.custom.css" rel="stylesheet" />    
    <link rel="stylesheet" href="tablesorter/themes/green/style.css" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>
    <script type="text/javascript" src="tablesorter/jquery.tablesorter.min.js"></script> 
    <script type="text/javascript">
    $(document).ready(function() 
        { 
            $("#test_table").tablesorter({ 
                sortForce: [[3,0]]
            }); 

            $(".group_details").hide();

            $(".group_header").click(function(){
                var group = $(this).attr("group");
                var $expander = $(this).children("td.expanderguy")

                if ($("." + group + ":visible").length){
                    $("." + group + "").fadeOut('fast');
                    $expander.html("<img src='icons/plus.gif'>");
                }
                else{
                    $("." + group + "").fadeIn('fast');
                    $expander.html("<img src='icons/minus.gif'>");
                }
            });
        } 
    ); 
    </script>
    <style type="text/css">
    .group_header td{
    background-color: #888888; !important
    }
    </style>
</head>
<body>
    <table id="test_table" class="tablesorter">
        <thead>
            <tr><th>First Name</th><th>Last Name</th><th>Email</th><th>Due Date</th><th>Amount Due</th></tr>
        </thead>
        <tbody>
            <tr class="group_header" group="group1"><td class="expanderguy"><img src="icons/plus.gif"></td><td></td><td></td><td>Monday, June 7</td><td></td></tr>
            <tr class="group_details group1"><td>Flavian</td><td>Wenceslas</td><td>fwencs@gmail.com</td><td>Monday, June 7</td><td>$100</td></tr>
            <tr class="group_details group1"><td>Gordian</td><td>Ives</td><td>gives@gmail.com</td><td>Monday, June 7</td><td>$1700</td></tr>
            <tr class="group_details group1"><td>Saladin</td><td>Tarquin</td><td>starquin@gmail.com</td><td>Monday, June 7</td><td>$1700</td></tr>      
            <tr class="group_details group1"><td>Urban</td><td>Cyprian</td><td>ucyprian@gmail.com</td><td>Monday, June 7</td><td>$1500</td></tr>
            <tr class="group_details group1"><td>Sargon</td><td>Swithun</td><td>sswithun@gmail.com</td><td>Monday, June 7</td><td>$1100</td></tr>
            <tr class="group_details group1"><td>Pompey</td><td>Ladislas</td><td>pladislas@gmail.com</td><td>Monday, June 7</td><td>$300</td></tr>
            <tr class="group_details group1"><td>Attila</td><td>Hiawatha</td><td>ahiawatha@gmail.com</td><td>Monday, June 7</td><td>$200</td></tr>
            <tr class="group_header" group="group2"><td class="expanderguy"><img src="icons/plus.gif"></td><td></td><td></td><td>Tuesday, June 8</td><td></td></tr>
            <tr class="group_details group2"><td>Bruce</td><td>Fenton</td><td>bfenton@gmail.com</td><td>Tuesday, June 8</td><td>$1700</td></tr>
            <tr class="group_details group2"><td>Wade</td><td>Sequoia</td><td>wsequoia@gmail.com</td><td>Tuesday, June 8</td><td>$1400</td></tr>        
            <tr class="group_details group2"><td>Eddie</td><td>Jerold</td><td>ejerold@gmail.com</td><td>Tuesday, June 8</td><td>$1100</td></tr>     
            <tr class="group_details group2"><td>Lynn</td><td>Lucan</td><td>llucan@gmail.com</td><td>Tuesday, June 8</td><td>$1200</td></tr>        
            <tr class="group_details group2"><td>Taegan</td><td>Tadg</td><td>ttadg@gmail.com</td><td>Tuesday, June 8</td><td>$100</td></tr>     
            <tr class="group_details group2"><td>Clyde</td><td>Reed</td><td>creed@gmail.com</td><td>Tuesday, June 8</td><td>$6100</td></tr>     
            <tr class="group_details group2"><td>Alaois</td><td>Art</td><td>aart@gmail.com</td><td>Tuesday, June 8</td><td>$2100</td></tr>      
            <tr class="group_details group2"><td>Gilbert</td><td>Patsy</td><td>gpatsy@gmail.com</td><td>Tuesday, June 8</td><td>$1500</td></tr>     
            <tr class="group_header" group="group3"><td class="expanderguy"><img src="icons/plus.gif"></td><td></td><td></td><td>Wednesday, June 9</td><td></td></tr>
            <tr class="group_details group3"  ><td>Clem</td><td>Eben</td><td>ceben@gmail.com</td><td>Wednesday, June 9</td><td>$2100</td></tr>
            <tr class="group_details group3"  ><td>Elijah</td><td>Julyan</td><td>ejulyan@gmail.com</td><td>Wednesday, June 9</td><td>$2100</td></tr>
            <tr class="group_details group3"  ><td>Marvyn</td><td>Damian</td><td>mdamian@gmail.com</td><td>Wednesday, June 9</td><td>$1100</td></tr>
            <tr class="group_details group3"  ><td>Sawyer</td><td>Ryker</td><td>sryker@gmail.com</td><td>Wednesday, June 9</td><td>$500</td></tr>               

        </tbody>
    </table>
</body>

Answer 1

这里有一点点玩弄是一些更简洁的工作代码。发布后代，随时提出改进建议。谢谢你的期待！

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
    <title>Table Manipulation Test</title> 
    <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.1.custom.css" rel="stylesheet" />    
    <link rel="stylesheet" href="tablesorter/themes/green/style.css" type="text/css"/> 
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script> 
    <script type="text/javascript" src="tablesorter/jquery.tablesorter.min.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() 
        { 
            $("#test_table").tablesorter({ 
                sortForce: [[3,0]]
            }); 

            $(".group_details").hide();

            $(".group_header").click(function(){
                var group = $(this).attr("id");
                var $expander = $(this).children("td.expanderguy")

                if ($("." + group + ":visible").length){
                    $("." + group + "").fadeOut('fast');
                    $expander.html("<img src='icons/plus.gif'>");
                }
                else{
                    $("." + group + "").fadeIn('fast');
                    $expander.html("<img src='icons/minus.gif'>");
                }
            });

            $("#test_table").bind("sortEnd",function() { 
                $('.group_header').each(function(){
                    var group = $(this).attr("id");
                    var headerId = $(this).index();
                    var detailId = $('.' + group + ':first').index();
                    if (headerId + 1 != detailId){
                        $(this).insertBefore($('.' + group + ':first'));
                    }
                });
            });
        });
    </script> 
    <style type="text/css"> 
    .group_header td{
    background-color: #888888; !important
    }
    </style> 
</head> 
<body> 
    <table id="test_table" class="tablesorter"> 
        <thead> 
            <tr><th>First Name</th><th>Last Name</th><th>Email</th><th>Due Date</th><th>Amount Due</th></tr> 
        </thead> 
        <tbody> 
            <tr class="group_header" id="group1"><td class="expanderguy"><img src="icons/plus.gif"></td><td></td><td></td><td>Monday, June 7</td><td></td></tr> 
            <tr class="group_details group1"><td>Flavian</td><td>Wenceslas</td><td>fwencs@gmail.com</td><td>Monday, June 7</td><td>$100</td></tr> 
            <tr class="group_details group1"><td>Gordian</td><td>Ives</td><td>gives@gmail.com</td><td>Monday, June 7</td><td>$1700</td></tr> 
            <tr class="group_details group1"><td>Saladin</td><td>Tarquin</td><td>starquin@gmail.com</td><td>Monday, June 7</td><td>$1700</td></tr>      
            <tr class="group_details group1"><td>Urban</td><td>Cyprian</td><td>ucyprian@gmail.com</td><td>Monday, June 7</td><td>$1500</td></tr> 
            <tr class="group_details group1"><td>Sargon</td><td>Swithun</td><td>sswithun@gmail.com</td><td>Monday, June 7</td><td>$1100</td></tr> 
            <tr class="group_details group1"><td>Pompey</td><td>Ladislas</td><td>pladislas@gmail.com</td><td>Monday, June 7</td><td>$300</td></tr> 
            <tr class="group_details group1"><td>Attila</td><td>Hiawatha</td><td>ahiawatha@gmail.com</td><td>Monday, June 7</td><td>$200</td></tr> 
            <tr class="group_header" id="group2"><td class="expanderguy"><img src="icons/plus.gif"></td><td></td><td></td><td>Tuesday, June 8</td><td></td></tr> 
            <tr class="group_details group2"><td>Bruce</td><td>Fenton</td><td>bfenton@gmail.com</td><td>Tuesday, June 8</td><td>$1700</td></tr> 
            <tr class="group_details group2"><td>Wade</td><td>Sequoia</td><td>wsequoia@gmail.com</td><td>Tuesday, June 8</td><td>$1400</td></tr>        
            <tr class="group_details group2"><td>Eddie</td><td>Jerold</td><td>ejerold@gmail.com</td><td>Tuesday, June 8</td><td>$1100</td></tr>     
            <tr class="group_details group2"><td>Lynn</td><td>Lucan</td><td>llucan@gmail.com</td><td>Tuesday, June 8</td><td>$1200</td></tr>        
            <tr class="group_details group2"><td>Taegan</td><td>Tadg</td><td>ttadg@gmail.com</td><td>Tuesday, June 8</td><td>$100</td></tr>     
            <tr class="group_details group2"><td>Clyde</td><td>Reed</td><td>creed@gmail.com</td><td>Tuesday, June 8</td><td>$6100</td></tr>     
            <tr class="group_details group2"><td>Alaois</td><td>Art</td><td>aart@gmail.com</td><td>Tuesday, June 8</td><td>$2100</td></tr>      
            <tr class="group_details group2"><td>Gilbert</td><td>Patsy</td><td>gpatsy@gmail.com</td><td>Tuesday, June 8</td><td>$1500</td></tr>     
            <tr class="group_header" id="group3"><td class="expanderguy"><img src="icons/plus.gif"></td><td></td><td></td><td>Wednesday, June 9</td><td></td></tr> 
            <tr class="group_details group3"><td>Clem</td><td>Eben</td><td>ceben@gmail.com</td><td>Wednesday, June 9</td><td>$2100</td></tr> 
            <tr class="group_details group3"><td>Elijah</td><td>Julyan</td><td>ejulyan@gmail.com</td><td>Wednesday, June 9</td><td>$2100</td></tr> 
            <tr class="group_details group3"><td>Marvyn</td><td>Damian</td><td>mdamian@gmail.com</td><td>Wednesday, June 9</td><td>$1100</td></tr> 
            <tr class="group_details group3"><td>Sawyer</td><td>Ryker</td><td>sryker@gmail.com</td><td>Wednesday, June 9</td><td>$500</td></tr>             
        </tbody> 
    </table> 
</body>

使用TableSorter插件进行简单分组

1 个答案: