在 jQuery 移动设备中单击按钮时对列表视图进行排序

Question

我是 jQuery 手机新手。单击按钮时，我希望能够按定价（例如，低-高）对列表视图项目进行排序。我似乎无法在网上找到任何有关如何在 jQuery 移动设备上执行此操作的信息。我知道有微型排序插件，但我需要自己编写方法。

这是我的列表视图的示例。

<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>

有简单的方法吗？任何指导将不胜感激，谢谢。

Answer 1

对传入数据进行排序是最快的选择，无论如何都会有 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>

此外，如果您需要更复杂的排序功能，可以按多个参数进行排序，请看这里：Sort array of objects by string property value

在 jQuery 移动设备中单击按钮时对列表视图进行排序

Sort listview on button click in jQuery Mobile

sorting

jquery-mobile

jquery-mobile-listview