Question

<html lang="en"> 
    <head> 
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
            <title>Sort plugin for jQuery</title> 
    </head> 
    <body> 

        <h1>Demo</h1> 

        <p>Click on the headers (fruit/quantity).</p> 

        <table> 
            <thead> 
                <tr> 
                    <th>Fruit</th> 
                    <th>Quantity</th> 
                </tr> 
            </thead> 
            <tbody> 
                <tr> 
                    <td>Grape</td> 
                    <td>15</td> 
                </tr> 
                <tr> 
                    <td>Apple</td> 
                    <td>4</td> 
                </tr> 
              </tbody> 
        </table>       

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
        <script src="jquery.sort.js"></script> 
        <script> 
            var th = jQuery('th'),
                li = jQuery('li'),
                inverse = false;

            th.click(function(){

                var header = $(this),
                    index = header.index();
                header
                    .closest('table')
                    .find('td')
                    .filter(function(){                     
                        return $(this).index() === index;
                    })
                    .sort(function(a, b){

                        a = $(a).text();
                        b = $(b).text();
                         return (
                            isNaN(a) || isNaN(b) ?
                                a > b : +a > +b
                            ) ?
                                inverse ? -1 : 1 :
                                inverse ? 1 : -1;

                    }, function(){
                        return this.parentNode;
                    });

                inverse = !inverse;

            });

        </script> 

    </body> 
</html>

在上面的程序中，当我点击<th>时，它会对该列中的行进行排序。它还使用此文件中的.sort方法。

你能解释一下上面的代码是如何工作的，以及它的内在工作吗？这是我获得上述代码的链接：

http://qd9.co.uk/projects/jQuery-Plugins/sort/demo.html

Answer 1

内联评论中的说明：

th.click(function(){

            var header = $(this), // get the table header as a JQuery object
                index = header.index(); // get the index - column number - of the header
            header
                .closest('table') // get the table that contains the header
                .find('td') // find all the td objects
                .filter(function(){                     
                    return $(this).index() === index; // but filter that list so that only td's in the relevant column are selected
                })
                .sort(function(a, b){ // use the external 'sort' function (JQuery plugin) on our list of table data, and sort using this anonymous function to compare

                    a = $(a).text(); // compare the text content of two td elements, using alphabetic or numeric ordering where appropriate
                    b = $(b).text();
                     return (
                        isNaN(a) || isNaN(b) ?
                            a > b : +a > +b
                        ) ?
                            inverse ? -1 : 1 : // and invert the sort order if the 'inverse' flag is true
                            inverse ? 1 : -1;

                }, function(){
                    return this.parentNode; // the sort function returns a list of sorted elements - so returning the td parent returns the row, which means it sorts the table rows
                });

            inverse = !inverse; // toggle the inverse flag so that multiple clicks on the header invert the order

        });

Comaprison（排序）功能：

比较功能很有趣。为了使其更具可读性，请考虑以下函数和示例输入/输出：

function compare(a, b) {
    return isNaN(a) || isNaN(b) ? a > b : +a > +b;
}

log("isNaN(\"hi\"):" + isNaN("hi"));
log("isNaN(8): " + isNaN(8));
log("isNaN(\"8\"): " + isNaN("8"));

log("compare(\"hi\", \"there\"): " + compare("hi", "there"));
log("compare(\"there\", \"hi\"): " + compare("there", "hi"));

log("compare(2, 4): " + compare(2, 4));
log("compare(4, 2): " + compare(4, 2));

log("compare(\"hi\", 2): " + compare("hi", 2));

<强>输出：

isNaN("hi"):true
isNaN(8): false
isNaN("8"): false
compare("hi", "there"): false
compare("there", "hi"): true
compare(2, 4): false
compare(4, 2): true
compare("hi", 2): false

<强>解释：

如果输入'不是数字'，则isNaN函数返回true，否则返回false。方便地，它将数字串视为数字。因此，如果我们比较两个数字（无论是否为字符串），我们的比较函数将返回

+a > +b

追加+只是将字符串转换为真正的javascript数字对象，这意味着当文本表示数值时，文本不会按字母顺序排序。

如果任一单元格的内容不是数字，则比较函数返回

a > b

...只对对象应用默认的>运算符。对于字符串，它将导致按字母顺序对字符串进行排序。

这个表排序jQuery脚本如何工作？

1 个答案: