在 jQuery Mobile 中单击按钮时对列表视图进行排序
Posted
技术标签:
【中文标题】在 jQuery Mobile 中单击按钮时对列表视图进行排序【英文标题】：Sort listview on button click in jQuery Mobile 【发布时间】：2020-03-28 05:02:23 【问题描述】：我是 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>
有简单的方法吗？任何指导将不胜感激，谢谢。
【问题讨论】：
【参考方案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 Mobile 中单击按钮时对列表视图进行排序的主要内容，如果未能解决你的问题，请参考以下文章
如何修改jQuery mobile子菜单中的关闭按钮以进行初始打开