Как работает этот скрипт jQuery для сортировки таблиц? - PullRequest
Новая
       7

Как работает этот скрипт jQuery для сортировки таблиц?

0 голосов
/ 18 мая 2011 
<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 из этого файла.

Можете ли вы объяснить, как работает приведенный выше код и как он работает? Это ссылка, по которой я получил вышеуказанный код:

1 Ответ

3 голосов
/ 18 мая 2011

Пояснения в комментариях: 

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 (sort) :

Функция сравнения интересная.Чтобы сделать его более читабельным, рассмотрим следующую функцию и пример ввода / вывода: 

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

..., которая просто применяет оператор по умолчанию >для объекта.В случае строк это приведет к сортировке строк по алфавиту.

...