Показать сообщение отдельно
  #6 (permalink)  
Старый 18.07.2017, 15:04
Интересующийся
Отправить личное сообщение для Neo54213 Посмотреть профиль Найти все сообщения от Neo54213
 
Регистрация: 03.07.2017
Сообщений: 20

var headers = ['Номер', 'Название', 'Количество', 'Цена'];
var fieldsNames = ['id', 'name', 'count', 'price'];
var orders = [
    [
        {
            id: 1,
            name: "Book",
            count: 3,
            price: 157
        },
        {
            id: 2,
            name: "Pen",
            count: 4,
            price: 85
        },
        {
            id: 3,
            name: "Phone",
            count: 1,
            price: 464
        },
        {
            id: 4,
            name: "Pencil",
            count: 65,
            price: 314
        },
        {
            id: 5,
            name: "Sharpener",
            count: 6,
            price: 96
        }
    ],
    [
        {
            id: 1,
            name: "Tape",
            count: 5,
            price: 543
        },
        {
            id: 2,
            name: "Textbook",
            count: 65,
            price: 314
        },
        {
            id: 3,
            name: "Pencil case",
            count: 35,
            price: 346
        },
        {
            id: 4,
            name: "Desk",
            count: 5,
            price: 4314
        },
        {
            id: 5,
            name: "Marker",
            count: 5,
            price: 145
        }
    ],
    [
        {
            id: 1,
            name: "Paper",
            count: 5,
            price: 87
        },
        {
            id: 2,
            name: "Chalk",
            count: 6,
            price: 435
        },
        {
            id: 3,
            name: "Clock",
            count: 8,
            price: 563
        },
        {
            id: 4,
            name: "Ruler",
            count: 22,
            price: 457
        },
        {
            id: 5,
            name: "Globe",
            count: 7,
            price: 789
        }
    ],
    [
        {
            id: 1,
            name: "Chair",
            count: 2,
            price: 54
        },
        {
            id: 2,
            name: "Eraser",
            count: 56,
            price: 2445
        },
        {
            id: 3,
            name: "Map",
            count: 11,
            price: 345
        },
        {
            id: 4,
            name: "Scissors",
            count: 24,
            price: 451
        },
        {
            id: 5,
            name: "Notebook",
            count: 32,
            price: 654
        }
    ]
];

function clearSortImage(exceptionTHId) {
    $('th:not(th:nth-child(' + +(exceptionTHId+1) + '))')
        .removeClass('asc')
        .removeClass('desc')
        .find('.indicator-image').hide();
}
function drawTabs() {
    for (var i = 0; i < orders.length; i++) {
        $('<div>', {
            text: 'Заказ ' + +(i+1),
            class: 'button order' + +(i+1),
            data: {
                id: i
            }
        }).appendTo($('header'));
    }
}
function drawTHs() {
    for (var i = 0; i < headers.length; i++) {
        var $thead = $('section #orderstable thead');
        var $th = $('<th>', {
            text: headers[i],
            data: {
                id: i
            }
        });

        var $indicatorImage = $('<img>', {
            alt: 'индикатор сортировки',
            class: 'indicator-image'
        });

        $th.prepend($indicatorImage);
        $thead.append($th);
    }
}
function sortTable(clickedHeader) {
    var $th = $('section #orderstable th');
    var headerIndex = $th.index($(clickedHeader));
    var fieldName = fieldsNames[headerIndex];
    var $divSelected = $('div.selected');
    var orderIdx = $divSelected.data('id');
    var order = orders[orderIdx];

    if($(clickedHeader).hasClass('asc')) {
        if (typeof order[0][fieldName] == "number") {
            order.sort(function (a, b) {
                return b[fieldName] - a[fieldName];
            });
        } else {
            order.sort(function (a, b) {
                if (a[fieldName] > b[fieldName]) {
                    return -1;
                }
                if (a[fieldName] < b[fieldName]) {
                    return 1;
                }
                return 0;
            });
        }
        $(clickedHeader).addClass('desc').removeClass('asc')
            .find('.indicator-image').attr('src', 'img/desc.png');
    }else{
        if(typeof order[0][fieldName] == "number"){
            order.sort(function(a, b) {
                return a[fieldName]-b[fieldName];
            });
        }else{
            order.sort(function(a, b) {
                if (a[fieldName] < b[fieldName]) {
                    return -1;
                }
                if (a[fieldName] > b[fieldName]) {
                    return 1;
                }
                return 0;
            });
        }
        $(clickedHeader).addClass('asc').removeClass('desc').find('.indicator-image').attr('src', 'img/asc.png');
    }
    $(clickedHeader).find('.indicator-image').show();

    $divSelected.click();
}

function drawTable(clickedButton) {
    var $tbody = $('#orderstable tbody')
    $tbody.empty();
    var orderIdx = $(clickedButton).data('id');
    var order = orders[orderIdx];
    for (var i = 0; i < order.length; i++) {
        var item = order[i];
        var $tr = $('<tr>');
        for (var column in item){
            var $td = $('<td>', {
                text: item[column]
            });
            $tr.append($td);
        }
        $tbody.append($tr);
    }
}

$(document).ready(function() {
    drawTabs();
    drawTHs();

    $('.button').on('click', function() {

        var $tbody = $('#orderstable tbody');
        if(!$(this).hasClass('selected')) {
            $('th').removeClass('asc')
                .removeClass('desc')
                .find('.indicator-image').hide();
        }

        $('.button').removeClass('selected');
        $(this).addClass('selected');

        drawTable(this);
    });

    $('th').on('click', function() {
        // var exceptionTHId = $(this).index();
        clearSortImage(/*exceptionTHId*/);
        sortTable(this);
    });

    $('section header .order2').click();
    $('#orderstable th.name').click();
});


Да мне просто ответ на вопрос нужен: как получить доступ к полю объекта? Вот, допустим, кликнул я по "Название". Как мне понять, что сортировать нужно по полю: name в объекте?
order.sort(function(a, b) {
                return a[fieldName]-b[fieldName];
            });

Вот этот кусок я написал, но как получить этот самый fieldName?
Вот во второй строке у меня то, чего быть не должно var fieldsNames = ['id', 'name', 'count', 'price']; Это костыль.
Ответить с цитированием