Сортировка списка при нажатии кнопки в jQuery Mobile

Я новичок в jQuery для мобильных устройств. Я хочу иметь возможность сортировать элементы списка по цене (например, низкая-высокая) при нажатии кнопки. Кажется, я не могу найти ничего в Интернете о том, как это сделать в jQuery mobile. Я знаю, что есть крошечный плагин для сортировки, но мне нужно написать метод самому.

Это пример моего списка.

<ul data-role="listview" data-filter="true" data-input="#searchpostcode" class="searchable">
            <li class="british fish low-budget"><a href="#">
                <img src="images/fishandchips.png" class="ui-li-thumb">
                <h4>Fish and Chips</h4>
                <p>British cuisine, contains fish</p>
                <p class="ui-li-aside">£6.00</p>
                </a>
            </li>
            <li class="spanish high-budget"><a href="#">
                <img src="images/paella.png" class="ui-li-thumb">
                <h4>Seafood Paella</h4>
                <p>Spanish cuisine, contains seafood</p>
                <p class="ui-li-aside">£8.00</p>
                </a>
            </li>
            <li class="american medium-budget"><a href="#">
                <img src="images/burger.png" class="ui-li-thumb">
                <h4>Beef Burger</h4>
                <p>American burger</p>
                <p class="ui-li-aside">£7.00</p>
                </a>
            </li>
</ul>

Есть ли простой способ сделать это? Любое руководство будет оценено, спасибо.


sorting jquery-mobile jquery-mobile-listview
person Bellybot    schedule 03.12.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Сортировка входящих данных — самый быстрый вариант, в любом случае будут манипуляции с DOM. Итак, отсортируйте данные, а затем вызовите listview("refresh").

ДЕМО:

var data = [
  {category: "british fish low-budget", picture: "fishandchips", name: "Fish and Chips", description: "British cuisine, contains fish", price: "6.00"},
  {category: "spanish high-budget", picture: "paella", name: "Seafood Paella", description: "Spanish cuisine, contains seafood", price: "8.00"},
  {category: "american medium-budget", picture: "burger", name: "Beef Burger", description: "American burger", price: "7.00"}
];

function updateListview(sorting){
  var direction = ~sorting.indexOf("-asc") ? 1 : -1;
  data.sort(function(a, b) {
    return direction *(Number(a.price) - Number(b.price));
  });
  var html = "";
  $.each(data, function(index, item) {
    html += '<li class="' + item.category + '"><a href="#">';
    html += '<img src="images/' + item.picture + '".png" class="ui-li-thumb">';
    html += '<h4>' + item.name + '</h4>';
    html += '<p>' + item.description + '</p>';
    html += '<p class="ui-li-aside">£' + item.price + '</p>';
    html += '</a></li>';
  });
  $("#food").data("sort", sorting).empty().html(html).listview("refresh");
}

$(document).on("listviewcreate", "#food", function(event, ui) {
  $("#price-sort").on("vclick", function(e) {
    var sorting = $("#food").data("sort") == "price-asc" ? "price-desc" : "price-asc";
    updateListview(sorting);
  });
});

$(document).on("pagecreate", "#page-one", function() {
  updateListview("none");
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div id="page-one" data-role="page">
    <div role="main" class="ui-content">
      <a id="price-sort" href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left ui-mini">Sort by Price</a>
      <ul data-role="listview" data-sort="none" data-inset="true" data-filter="true" id="food" name="food"></ul>
    </div>
  </div>
</body>
</html>

Кроме того, если вам нужна более сложная функция сортировки, которая может сортировать более чем по одному параметру, посмотрите здесь: Сортировать массив объектов по строковому значению свойства

person deblocker    schedule 04.12.2019
comment
Спасибо за ваш ответ. Ваш код помог мне разработать собственное решение. - person Bellybot; 06.12.2019